波紋アニメーション付きボタンを作る方法
波紋アニメーション付きボタンを作る方法を紹介します。ボタンをクリックしたときに、クリック位置から円形の波紋が広がるように表示することで、押した反応を分かりやすく伝えられます。シンプルなボタンに動きを加えたい場合や、クリック感のあるUIを作りたい場合に使いやすい表現です。
このサンプルでは、HTML・CSS・JavaScriptを使って波紋アニメーション付きボタンを作成します。CSSでボタンの見た目と波紋の広がるアニメーションを設定し、JavaScriptでクリック位置を取得して、その位置から波紋が広がるように処理します。
送信ボタン、購入ボタン、詳細ボタン、メニュー内のボタンなど、ユーザーの操作に反応を付けたい場面で活用できます。波紋の色や広がる大きさ、アニメーション速度はCSSから変更できるため、サイトのデザインに合わせてカスタマイズできます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、クリックした位置から円形の波紋アニメーションが広がります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマホ表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>波紋アニメーション付きボタン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ボタン配置エリア -->
<div class="ripple-animation-button_wrap">
<!-- 波紋アニメーション付きボタン -->
<button class="ripple-animation-button_button" type="button">
クリックしてください
</button>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#f8fafc;
font-family:sans-serif;
}
/* ボタン配置エリア */
.ripple-animation-button_wrap{
text-align:center;
}
/* 波紋アニメーション付きボタン */
.ripple-animation-button_button{
position:relative;
overflow:hidden;
padding:16px 36px;
border:none;
border-radius:999px;
background:#2563eb;
color:#ffffff;
font-size:16px;
font-weight:700;
cursor:pointer;
}
/* 波紋 */
.ripple-animation-button_ripple{
position:absolute;
/* 波紋の最初の大きさ */
/* 数値を大きくすると、出始めの円が大きくなる */
width:20px;
height:20px;
border-radius:50%;
/* 波紋の色 */
/* rgba の最後の数値を大きくすると濃く、小さくすると薄くなる */
background:rgba(255,255,255,.55);
/* クリック位置を中心にして、最初は小さく表示する */
transform:translate(-50%,-50%) scale(0);
/* 波紋の広がる時間 */
/* .6s を大きくするとゆっくり広がり、小さくすると素早く広がる */
animation:ripple-animation-button_wave .6s ease-out;
pointer-events:none;
}
/* 波紋が広がって消える動き */
@keyframes ripple-animation-button_wave{
to{
/* 波紋の広がる大きさ */
/* scale(16) を大きくすると広く広がり、小さくすると控えめになる */
transform:translate(-50%,-50%) scale(16);
/* 最後に透明にして消す */
opacity:0;
}
}
// ボタンを取得
const rippleButton = document.querySelector(".ripple-animation-button_button");
// ボタンをクリックしたときの処理
rippleButton.addEventListener("click", function(event){
// 波紋用の要素を作成
const ripple = document.createElement("span");
// ボタンの位置情報を取得
const rect = rippleButton.getBoundingClientRect();
// 波紋用のクラスを追加
ripple.className = "ripple-animation-button_ripple";
// クリック位置を波紋の表示位置にする
ripple.style.left = event.clientX - rect.left + "px";
ripple.style.top = event.clientY - rect.top + "px";
// ボタンの中に波紋を追加
rippleButton.appendChild(ripple);
// アニメーション終了後に波紋を削除
setTimeout(function(){
ripple.remove();
}, 600);
});
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLにボタンを配置し、CSSで波紋アニメーションの見た目や動きを設定します。JavaScriptではクリック位置を取得し、その位置から波紋が広がるように処理を行います。
sample/
├── index.html
├── style.css
└── script.js
3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。ボタンをクリックすると、クリックした位置から波紋アニメーションが広がります。波紋の色や大きさ、広がる速度はCSSから変更でき、クリック時の処理や波紋を削除するタイミングはJavaScriptから自由にカスタマイズできます。
コメント