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

CSSだけでボタンをアニメーション化する方法｜クリック時のリップル効果を実装

CSSを使えば、JavaScriptに頼らなくてもボタンに洗練されたアニメーション効果を簡単に追加できます。本記事では、ボタンをクリックした瞬間に波紋（リップル）が広がるような視覚効果を持つアニメーションボタンの実装方法を、具体的なコード例とともに解説します。

実装例

以下は、CSSのみでボタンをアニメーション化するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   position: relative;
   background-color: rgb(100, 0, 84);
   border: none;
   font-size: 28px;
   color: rgb(255, 169, 255);
   padding: 20px;
   width: 200px;
   text-align: center;
   -webkit-transition-duration: 0.4s;
   box-shadow: 5px 10px 18px rgb(121, 82, 185);
   transition-duration: 0.4s;
   text-decoration: none;
   overflow: hidden;
   cursor: pointer;
}
button:after {
   content: "";
   background: rgb(251, 255, 0);
   display: block;
   position: absolute;
   padding-top: 300%;
   padding-left: 350%;
   margin-left: -20px;
   margin-top: -120%;
   opacity: 0;
   transition: all 0.8s
}
button:active:after {
   padding: 0;
   margin: 0;
   opacity: 1;
   transition: 0s
}
</style>
</head>
<body>
<h1>Animated Button Example</h1>
<button>Click Here</button>
<h1>Click on the above button to see ripple effect</h1>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSだけでボタンをアニメーション化する方法｜クリック時のリップル効果を実装

コードのポイント解説

  • :after 疑似要素：ボタン要素の上に重ねる黄色いレイヤーを生成します。通常時は opacity: 0 で非表示になっており、overflow: hidden によってボタンの外にはみ出す部分は切り取られます。
  • :active 疑似クラス：ボタンが押されている間だけ opacity: 1 に切り替わり、同時に padding と margin を 0 にすることで、レイヤーが中心から一気に縮小するように見えます。これが波紋が広がるような演出の仕組みです。
  • transition プロパティ：0.8秒のトランジションを指定することで、クリック解除後にレイヤーがゆっくりと拡大しながらフェードアウトし、滑らかなアニメーションを実現しています。
  • box-shadow：ボタン本体に影を付けることで、立体感と押しやすさを演出しています。

このように、擬似要素と擬似クラスを組み合わせるだけで、外部ライブラリ不要の軽量なボタンアニメーションが実装できます。色やサイズ、トランジション時間を調整すれば、さまざまなデザインに応用可能です。

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

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

  2. CSSでリストの箇条書きマーカーをスタイリング＆アニメーション化する方法

    CSSの list-style プロパティを使用すると、順序なしリスト（<ul>）や順序付きリスト（<ol>）の箇条書きマーカー（ブレット）を自由にカスタマイズできます。デフォルトのマーカーを非表示にしたうえで、box-shadow や :hover 疑似クラス、CSSカウンターなどを組み合わせることで、マウスオーバー時に動きのある魅力的なリストを作成できます。list-styleプロパティの基本構文CSSの list-style プロパティは、次のように記述します。li { list-style: /*値*/; }none を指定するとデフォルトのマーカーが消