CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでボタンホバー時にフェードイン効果を実装する方法

CSSを使えば、ボタンにマウスカーソルを重ねた（ホバーした）ときに、ふんわりとフェードインするアニメーション効果を簡単に実装できます。JavaScriptは不要で、transitionプロパティと:hover疑似クラスを組み合わせるだけで実現できるのが魅力です。

実装例

以下のコードをそのままHTMLファイルとして保存し、ブラウザで開いてみてください。ボタンにカーソルを重ねると、半透明だったボタンが0.5秒かけて滑らかにフェードインします。

<!DOCTYPE html>
<html>
<head>
<style>
.btn {
  background-color: orange;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  margin: 5px;
  opacity: 0.5;
  transition: 0.5s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  opacity: 1;
}
</style>
</head>
<body>
<button class="btn">Result</button>
</body>
</html>

コードのポイント解説

  • opacity: 0.5; … 通常時のボタンの透明度を50%に設定し、半透明の状態を作ります。
  • transition: 0.5s; … スタイルが変化する際に0.5秒かけて滑らかに遷移させます。この指定があることで、急に切り替わるのではなく「フェード」のような自然な演出になります。
  • .btn:hover { opacity: 1; } … カーソルがボタンに重なった瞬間に、透明度を100%（完全不透明）へ変化させます。

注意点：opacityの値は0〜1の範囲で指定する

opacityプロパティは0（完全に透明）から1（完全に不透明）までの範囲で指定します。1より大きい値（例：opacity: 2）を設定しても、ブラウザ側で自動的に1に制限されるため、それ以上濃くなることはありません。

応用：色や影も一緒に変化させる

transitionはopacity以外のプロパティにも適用できます。背景色やシャドウを同時に変化させると、よりリッチなホバー演出が可能です。

.btn {
  background-color: orange;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.5s ease;
}
.btn:hover {
  opacity: 1;
  background-color: darkorange;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

このように、transitionと:hoverを組み合わせるだけで、CSSのみで洗練されたインタラクションを実現できます。ぜひ自分のサイトやアプリのボタンに取り入れてみてください。

  1. CSSで検索ボタンを作成する方法｜サンプルコード付きで解説

    CSSを使えば、テキスト入力欄と検索アイコンボタンを組み合わせた、おしゃれで使いやすい検索フォームを簡単に作成できます。ここでは、Font Awesomeのアイコンを活用した検索ボタンの実装例を、実際のコードとともに紹介します。実装例（サンプルコード）以下は、CSSを使用して検索ボタンを作成するためのコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">

  2. CSSでホバー時に要素を表示する方法【サンプルコード付き】

    CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <style>    body{       margin:20px;       padding:20px;       font-family: 'Segoe UI', Tahoma,