CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。
コードを見ながらサンプルを確認することができるので、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。
コピペで実現！思わず押したくなるCSSボタンエフェクトまとめ
マウスをホバーすると、重なるようなぬるりとした動きを楽しむことができるナビゲーションメニュー。
See the Pen Button hover effect by Comehope (@comehope) on CodePen.
立体的に飛び出るボタンエフェクト。
See the Pen rémi’s pop-up by Thibaud Goiffon (@Gthibaud) on CodePen.
重なった二枚のパネルを切り替えながらクリックできます。
See the Pen Button hover effect by Comehope (@comehope) on CodePen.
ボタンの下の方から少しずつ色が変化していくCSSアニメーションテクニック。
See the Pen Epic Button by Andreas Storm (@andreasstorm) on CodePen.
実際に押しているような立体感を、ドロップシャドウを使って表現したボタンエフェクト。
See the Pen UI #1 – Nav Buttons by Albert Feynman (@AlbertFeynman) on CodePen.
ボタンにホバーすると、レイヤー状に重なっていたパネルが飛び出します。
See the Pen Layered Button by Dronca Raul (@rauldronca) on CodePen.
ウェブサイトなどで使われいたら、思わず押したくなる、滑らかなアニメーションが採用されています。
See the Pen CSS BUTTON HOVER by Imran Pardes (@ImranPardes) on CodePen.
Sass button border hover effect mixin
ボタンの隅から徐々に色が変化していくアニメーション。
See the Pen Sass button border hover effect mixin by Giana (@giana) on CodePen.
Multiple transitions on a button
ボタンにホバーすると、隠れていた文字テキストがふわりと追加されます。
See the Pen Multiple transitions on a button by Chris Coyier (@chriscoyier) on CodePen.
モコモコと泡のように盛り上がってくるCall-to-Actionボタン。
See the Pen Bubble coloring button by Comehope (@comehope) on CodePen.
擬似要素にスタイリングを加えることで、ユニークなかたちをしたボタンデザインを表現しています。
See the Pen Bouncy Pseudo Element Buttons by Dion Dermott (@DeeDee23) on CodePen.
カーソルを動かした方向に向かって、ホバーエフェクトが放射線状に広がっていくアニメーション。
See the Pen Animated hover button by Sammy Helali (@Lunoware) on CodePen.
ジグザグやジグソーパズル状に砕けながら、消えていくボタンエフェクト3種類セット。
See the Pen Buttons falling apart by Mikael Ainalem (@ainalem) on CodePen.
ボタンをクリックすると、メールアドレス入力フォームが登場します。
See the Pen Subscription Animation by Valery Alikin (@AlikinVV) on CodePen.
まるでダンボール箱などで手作りしたような、立体感抜群なボタン各種セット。
See the Pen Thoughts & Prayers by Adam Kuhn (@cobra_winfrey) on CodePen.
Simple button with gradient shadow in CSS
鮮やかなグラデーションカラーをドロップシャドウとして利用した、ユニークなボタンサンプル例。
See the Pen Simple button with gradient shadow in CSS by tungu (@tunguska) on CodePen.
Mouse movement button with border-radius
ボタンをクリックすることで、円形グラデーション状に色が変化するアニメーションエフェクト。
See the Pen Mouse movement button with border-radius by Tobias Reich (@electerious) on CodePen.
黄色のボタンを押すと、車輪のついたトラックのように走り出すUIモーション。
See the Pen UI Motion – Shipping Concept by Nerdmanship ⚡️ (@nerdmanship) on CodePen.
クリックすることで、ドロップダウン状にメールアドレスの入力フォームが出現するテクニック。
See the Pen Email Optin by Adam Rasheed (@adamrasheed) on CodePen.
SVG Filter Gooey Share, Social Media Button
ボタンをクリックすると、各種SNSシェアボタンがスライム状にぬるりと登場する仕掛け。
See the Pen SVG Filter Gooey Share, Social Media Button by Sasha (@sashatran) on CodePen.
#codevember #9 Electric hover effect
表示されたラインに触れることで、ビリビリと電気が流れたようなショックを与えることができます。
See the Pen #codevember #9 Electric hover effect by Robin Delaporte (@robin-dela) on CodePen.
なにもない空白のブランクですが、文字テキストにホバーすることで、下から立体的なグラデーションがふわりと浮かび上がります。
See the Pen One div hover animation by Cassidy Williams (@cassidoo) on CodePen.
ボタンをクリックすると、アニメーションしながらグラデーションが動き出すテクニック。
See the Pen Gradient Hover Effect by Chris Colvin (@chrismcolvin) on CodePen.
Button hover effects with box-shadow
box-shadowプロパティを利用した、シンプルで効果的なボタンホバーエフェクト7種類セット。
See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.
ぷりんとしたリキッド液体のような動きを可能にした、インタラクティブなボタンエフェクト。
See the Pen ▶ Liquid Button by Tamino Martinius (@Zaku) on CodePen.
Daily UI #016 | Pop-Up / Overlay
ボタンをクリックするとポップアップ型のモーダルウィンドウが表示されます。
See the Pen Daily UI #016 | Pop-Up / Overlay by Samuel Janes (@SamuelJanes) on CodePen.
クリックするたびに色が変わり、泡のようなバブルエフェクトが素敵なスニペット。
See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.
Animated Gradient Ghost Button Concept
グラデーションカラーをアニメーションさせる、シンプルで効果的なボタンエフェクト。
See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.
16種類のCSS3アニメーションテクニックを使ったボタンエフェクト集。
See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.
Button outline animation on hover
シンプルなラインの動きが、思わず視線を誘導するアニメーションボタン。
See the Pen Button outline animation on hover by Eric Grucza (@egrucza) on CodePen.
SVGを使ったリニア状のラインアニメーションとグラデーションが美しい作品。
See the Pen Animated SVG Hover Buttons by Tyler Peterson (@Gingernaut) on CodePen.
古いレトロなアーケードゲームなどを連想させれる、8-bit風のホバーエフェクトを活用した例。
See the Pen 8-bit Hovers by Tiffany Stoik (@tstoik) on CodePen.
Gradient Buttons with Background-Color Change (CSS-only)
CSSのみでスタイリングされた、カラフルなグラデーションのボタン５つセット。
See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
ダーク系の背景に金色の配色が、豪華でラグジュアリーなボタンエフェクト。
See the Pen luxury buttons by Daniel Box (@dbox) on CodePen.
Parallax 3D Button with JS controlled CSS variables
マウスホバーに合わせて、立体的にボタンが動き出す3Dボタンエフェクト。
See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.
Three Simple CSS Button Hover Effects
細いラインを使ったシンプルなボタンホバーエフェクト。
See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.
クリックすると、火花が飛び散るようなエフェクトがユニーク。
See the Pen Fireworks Button 😀 by Alex Zaworski (@alexzaworski) on CodePen.
マウスホバーで矢印がアニメーション表示されるボタンエフェクト。
See the Pen Button with arrow on hover by Nicholas Petersen (@nicholaspetersen) on CodePen.
CSSのみでスタイリングされた、シンプルで効果的なボタンアニメーション12種類。
See the Pen 12 fancy buttons by bartekd (@bartekd) on CodePen.
ドットやストライプ柄をつかったユニークなボタンホバーエフェクト。
See the Pen animation button#2 by lichinlin (@lichin-lin) on CodePen.
Big Fancy 3D Rotating SVG Button
ボタンが奥行き感たっぷりに垂直方向に回転するエフェクト。
See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen.
カラフルなグラデーションカラーで、CSSのみでスタイリングされたボタンエフェクト。
See the Pen Button with gradient shadow by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen.
