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

CSSでフェードボタンを作成する方法！transitionを使った滑らかな色変化の実装

Webサイトにアクセントを加える演出のひとつが、マウスカーソルを重ねたとき（ホバー時）に背景色がふんわりと変化する「フェードボタン」です。CSSのtransitionプロパティを使えば、JavaScriptなどに頼らず、HTMLとCSSだけで簡単に実装できます。

フェードボタンの実装コード

以下は、ホバー時に背景色と文字色がスムーズにフェードイン・フェードアウトするボタンのサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button {
  background-color: rgb(255, 175, 222);
  border: none;
  color: black;
  padding: 25px;
  text-align: center;
  font-size: 20px;
  margin: 4px 2px;
  transition: 0.3s;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bolder;
}
button:hover {
  background-color: #4d0036;
  color: white;
}
</style>
</head>
<body>
<h1>フェードボタンのサンプル</h1>
<button>ここにカーソルを合わせてください</button>
</body>
</html>

コードのポイント解説

このフェード効果を実現しているのは、主に以下の2つの指定です。

  • transition: 0.3s; … ボタンのスタイルが変化するときに、0.3秒かけて滑らかに遷移させる設定です。この数値を大きくすると変化がゆっくりになり、小さくすると素早く切り替わります。
  • button:hover … マウスカーソルがボタン上に乗ったときに適用されるスタイルです。ここで背景色を濃い色（#4d0036）に、文字色を白に変更することで、フェードしながら色が変わる演出になります。

また、padding: 25px;やfont-size: 20px;などでボタンのサイズや文字を調整し、クリックしやすく見栄えの良いデザインにしています。

表示結果

上記のコードをブラウザで開くと、ピンク色のボタンが表示されます。

通常の状態では、明るいピンク（rgb(255, 175, 222)）の背景に黒い文字が表示されています。

ボタンにマウスカーソルを重ねると、濃い紫がかった色（#4d0036）の背景へと0.3秒かけて滑らかにフェードし、文字も白色に変化します。カーソルを離すと、元のピンク色へゆっくりと戻ります。

応用のヒント

transitionプロパティでは、変化させる対象やタイミング関数を細かく指定できます。例えばtransition: background-color 0.5s ease-in-out;のように書くと、背景色だけを0.5秒かけて緩急をつけて変化させられます。ボックスシャドウや角丸（border-radius）と組み合わせれば、より洗練されたモダンなボタンデザインに仕上げることも可能です。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>