ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。
ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。
今回は、アニメーションが美しいCSSによるボタンデザインのサンプルコードをご紹介したいと思います。
ホバーエフェクト
ビット調のホバーエフェクトアニメーション
ホバーに合わせて楽しいビット調のアニメーションが現れます。
6つのボタンデザイン
ユニークな6つのボタンのCSSアニメーションのサンプル。
矢印が現れるボタン
カーソルを合わせると左側から矢印が登場するボタン。
テキストが変化するボタン
カーソルを合わせると、ボタンのテキストがアニメーションを伴って変化します。
ポップで楽しいボタン
カーソルを合わせると、画面内の矢印も一緒に動きます。
ボタンの背景のアニメーション
流体シェイプのような図形がボタンの下側からふわっと登場するボタン。
ネオン風のボタン
ネオン風のアニメーションが美しいボタン。
ボーダーのアニメーション
カーソルを合わせると、テキストの下線がボタンのボーダーへ変化します。
色々なホバーエフェクト
box-shadowを使ったシンプルかつ基本的なボタンのサンプルコードです。
ユニークなホバーエフェクト
ユニークなアニメーションを伴うCSSでスタイルされたボタンのサンプルコード。
ホバーエフェクト（バブル）
マウスカーソルを合わせると、ボタンの端からバブルが現れて弾けます。
マウスに合わせて動くボタン
液体のような感触の、JSで作られたボタン。
色々なホバーエフェクト
CSSだけで作られたボタンのホバーエフェクトのサンプル集。
グラデーションが変化するホバーエフェクト
マウスカーソルを合わせると、背景のグラデーションの位置が動くアニメーション。
キラリとボタンが光るホバーエフェクト
光が当たってキラリと輝くCSSだけで作られたボタンのアニメーション。
ホバーに合わせて伸びるボタン
カーソルを合わせると、テキスト左側のボタンが広がって1つのボタンに変化します。
ボーダー色が変化するボタン
CSSだけで作られたカーソルを合わせると右下から左上にかけてボーダーとテキストの色が変化するボタン。
回転するボタン
CSSで作られた立体的に回転するボタンのサンプルコード。
色々なホバーエフェクト
スタイリッシュなボタンのホバーエフェクトのサンプル集です。
色々なホバーエフェクト
CSSで作られた色々なホバーエフェクトのサンプル集。
形が変化するボタン
Splitting.jsを使って作られたテキストの位置とボタンの形状が変化するボタンです。
かわいらしい立体的なボタン
ホバーエフェクトとクリックアクションでボタンの凹み具合に差がつけられている、立体的なボタン。
斜めに移動するホバーエフェクト
カーソルを合わせると斜めにボタンがスライドします。
ホバーすると現れるボタン
テキストにカーソルを合わせると、ボタンが現れるアニメーションのサンプルコード。
クリックアクション
クリックすると弾けるボタン
クリックするとボタンの周りにバブルが弾けるアニメーションのサンプル。アニメーション部分はCSSだけで作られています。
ひと目でステータスが分かる送信ボタン
クリックするとローディングアニメーションに変化し、送信完了を伝えてくれるボタン。
クリックするとクラッカーが弾けるボタン
ボタンの中のクラッカーのアイコンが、クリックに合わせて変化します。
リッチな送信アニメーション
紙飛行機が飛んで送信完了がひと目で分かるボタン。
トグルボタン
色々なトグルボタン
CSSだけで作られたトグルボタンのアニメーションのサンプル集です。
色々なトグルボタン
アイデアが面白いトグルボタンのサンプルコード集。
その他のボタン
グラデーションが変化するボタン
グラデーションのアニメーションがループして、不思議な雰囲気を生み出しているボタン。
スクロールダウンのボタン
Webサイトでよく見かけるスクロールダウンのボタン。
アニメーションを取り入れたボタンをデザインしてみよう
ボタンのデザインや、アニメーションの作り方、CSSを使ったテクニックは下記のページでもご紹介しています。
