ホバーでふわっと浮くボタンを作る方法【HTML/CSS・サンプルコード付き】

ボタン

ホバーでふわっと浮くボタンを作る方法

ホバーでふわっと浮くボタンを作る方法を紹介します。マウスを重ねたときにボタンが少し上へ移動し、影が強くなることで、浮き上がるような動きを表現できます。クリックできる要素であることを自然に伝えられるため、WebサイトやWebアプリのボタン演出として使いやすいアニメーションです。

このサンプルでは、HTMLとCSSだけを使ってホバー時にふわっと浮くボタンを作成します。CSSの transform と box-shadow、transition を組み合わせることで、JavaScriptを使わずに滑らかなホバーアニメーションを実装できます。

詳細を見るボタン、送信ボタン、ダウンロードボタン、CTAボタンなど、ユーザーに押してほしいボタンの見た目を少し目立たせたい場面で活用できます。浮き上がる距離や影の強さ、アニメーション速度はCSSから調整できるため、サイトの雰囲気に合わせてカスタマイズしやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ボタンへマウスを重ねると、transform と box-shadow により、ふわっと浮き上がるアニメーションを確認できます。

コードをコピーして使おう！

<!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="hover-floating-button_wrap">

    <!-- ホバーで浮くボタン -->
    <button class="hover-floating-button_button" type="button">
      ホバーしてください
    </button>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLにボタンを配置し、CSSでボタンの色、角の丸み、影、ホバー時の浮き上がるアニメーションを設定します。JavaScriptを使用せず、HTMLとCSSだけで実装できます。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。ボタンへマウスを重ねると、transform:translateY(-8px); によって上へ移動し、box-shadow によって影が強くなります。浮き上がる距離は translateY の数値、浮き上がる時間は transition の秒数を変更することで調整できます。

コメント