ホバーでふわっと浮くボタンを作る方法
ボタンにカーソルを重ねると、ふわっと上へ浮き上がるボタンを作る方法を紹介します。このサンプルでは、通常時はシンプルな青いボタンを表示し、ホバーするとボタン全体が少し上へ移動します。JavaScriptを使用せず、HTMLとCSSだけで実装できます。
ホバー時にボタンの位置を変えることで、カーソルを重ねたことが視覚的に分かりやすくなります。さらに、ボタンが浮き上がる動きに合わせて影を大きくすることで、画面から少し離れたような立体感を表現しています。リンクボタンやお問い合わせ、申し込み、詳細ページへの移動など、操作を目立たせたい場所で利用できます。
CSSではtransformを使ってボタンを上方向へ移動し、box-shadowで影の変化を加えます。また、transitionを指定することで、位置と影が急に切り替わるのではなく、滑らかに変化する動きにしています。移動量や影の大きさ、変化する時間を調整することで、浮き上がり方を好みに合わせて変更できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンにカーソルを重ねて、ふわっと浮き上がる動きを確認できます。
コードをコピーして使おう！
<!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>
<!-- ホバーでふわっと浮くボタン -->
<a
class="hover-float-button_link"
href="#">
ボタン
</a>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではリンクとして利用できるボタンを配置し、CSSではボタンのデザインとホバー時の動きを設定します。ボタンにカーソルを重ねると上方向へ移動し、同時に影が大きくなることで、ふわっと浮き上がるように見えます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはホバーでふわっと浮くボタンを配置するファイルです。a要素の文字を変更でき、href="#"を変更すると任意のリンク先を設定できます。
style.cssはボタンのデザインとホバー時の動きを設定するファイルです。transformでボタンを上方向へ移動し、box-shadowで影を変化させます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ボタンにカーソルを重ねると、ボタンが上方向へ移動しながら影が大きくなります。実際にリンクとして使用する場合は、a要素のhref="#"を移動先のURLへ変更してください。
カスタマイズできる内容
index.htmlではボタンに表示する文字とリンク先を変更できます。style.cssではボタンの背景色や文字色、内側余白、角丸、文字サイズのほか、ホバー時の移動量や影の大きさ、変化する時間を変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
padding:14px 28px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の28pxを大きくするとボタンが横に広がります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると角丸のない四角いボタンになります。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると文字が小さくなります。
transform:translateY(-6px);
ホバー時にボタンを上へ移動する量です。マイナス方向の値を大きくすると、より高く浮き上がります。
box-shadow:0 12px 24px rgba(0,0,0,.22);
ホバー時の影です。12pxで影の上下位置、24pxでぼかし量を調整できます。値を大きくすると影が広がり、浮き上がった印象が強くなります。
transition:transform .3s ease,box-shadow .3s ease;
ボタンの移動と影が変化する時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。
レスポンシブ対応
このサンプルではページ全体の左右に20pxの余白を確保し、ボタンは内容に合わせた横幅で表示されます。そのため、スマートフォン・タブレット・PCなど画面幅が異なる環境でも、画面端との間隔を保ちながら表示できます。
コメント