CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。
CSS3のテクニックがより進歩したことで、アニメーションなどより手軽なものとなっています。実際のコードを見ながらサンプルを確認、編集できるので、制作時間の短縮にもつながるだけでなく、世界基準の新テクニックをウェブサイトに採用することもできます。
コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ
ホバーエフェクトを確認するのには、「Run Pen」をクリックし、「Edit on Codepen」よりコードの編集を直接行うことができます。
Button Hover Effect with box-shadow
CSSのみでスタイリングできるアニメーションが素敵なボタン用ホバーエフェクト集。
See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.
幅広いデザイン用途に対応できる、コレクションしておくと便利なボタンスタイリング5種セット。
See the Pen Cool buttons by Riccardo Zanutta (@rickzanutta) on CodePen.
淡いドロップシャドウが立体感を演出できるボタンホバーエフェクト。
See the Pen Button with Hover Effect by Sasha (@sashatran) on CodePen.
マウスホバーすることでグラデーションがアニメーションするエフェクト。
See the Pen Animated gradient button by Katia De Juan (@Katiae) on CodePen.
古いブラウン管テレビが壊れたような、グリッチエフェクトをCSSで表現するテクニック。
See the Pen Glitch effect in CSS by Thomas Aufresne (@origine) on CodePen.
Gradient Buttons with Background-Color Change
背景のグラデーションカラーがホバーで変化するテクニックで、CSSスタイリングのみで表現できます。
See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.
Gradient Line Animation Effect
ボタンのドロップシャドウの代わりに虹色のグラデーションカラーを利用し、アニメーション付きで表示できるテクニック。
See the Pen PbEGYy by Marc Thomas (@mrcthms) on CodePen.
高級なラグジュアリー感を演出したいときに活用したいボタンエフェクト。
See the Pen luxury buttons by Daniel Box (@dbox) on CodePen.
液体のようにヌルヌルと動くカラフルなボタンエフェクト。
See the Pen ▶ Liquid Button by Tamino Martinius (@Zaku) on CodePen.
シャボン玉のようなバブル状エフェクトが素敵なボタン。
See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.
See the Pen The uncomfortable btn by Lewi Hussey (@Lewitje) on CodePen.
Parallax 3D Button with JS Controlled CSS Variables
マウスホバーに合わせて立体的に動くボタンエフェクト。
See the Pen Parallax 3D Button with JS controlled CSS variables by Tobias Reich (@electerious) on CodePen.
CSS-Mask Button Hover Animation ( Experimental )
CSS Maskを利用した新しいテクニックで、ブラシでこすったようなエフェクト。
See the Pen CSS-Mask Button Hover Animation ( Experimental ) by Yugam (@pizza3) on CodePen.
５種類のUXを改善できるボタンホバーエフェクトを揃えたセット。
See the Pen Button Hover Animations by Akshay Nair (@phenax) on CodePen.
擬似要素をつかってスタイリングするラインアニメーション付きボタン。
See the Pen Hover #3 using pseudo-element by Sasha (@sashatran) on CodePen.
Button Outline Animation on Hover
See the Pen Button outline animation on hover by Eric Grucza (@egrucza) on CodePen.
See the Pen Push Me Button by Nathan Taylor (@nathantaylor) on CodePen.
Animation Button #3 Hover Effect
See the Pen animation button#3-hover effect by lichinlin (@lichin-lin) on CodePen.
Button.CSS: CSS3 Button Animations
フリップや波ウェーブ、スライドなどインタラクティブなボタンエフェクトを揃えたセット。
See the Pen Button.css: CSS3 Button Animations by Zixuan(Kevin) Fan (@kevinfan23) on CodePen.
さまざまなアニメーションテクニックを一式まとめたボタンエフェクト集。
See the Pen Animated CSS3 Buttons by Sazzad (@sazzad) on CodePen.
Gradient Hovver Animated Button
See the Pen Gradient hover animated button | Welcome in my world by Marcel Pirnay (@mars2601) on CodePen.
滑らかに重なる２本のラインが美しいボタンホバーエフェクト。
See the Pen Great button animation by Valentin Galmand (@valentingalmand) on CodePen.
Animated Gradient Ghost Button Concept
淡いグラデーションカラーがアニメーション付きで変化するホバーエフェクト。
See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.
See the Pen Half Fuller Buttons by David Fuller (@half-fuller) on CodePen.
See the Pen Animated SVG Hover Buttons by Tyler Peterson (@Gingernaut) on CodePen.
ゲームで利用されているようなSFチックなUIデザインを作成できます。
See the Pen Button hover by Tim Rijkse (@timrijkse) on CodePen.
Gaming Button with Hover Effecrt
ボタンにマウスホバーすることで無数のラインが流れるように表示されるユニークなエフェクト。
See the Pen Gaming button with hover effect by kaigth (@kaigth) on CodePen.
マウスホバーすることでスライド状に色と文字テキストが切り替わるエフェクト。
See the Pen Amy Winehouse Doc Button by Eric Grucza (@egrucza) on CodePen.
キラリと光るようなエフェクトをCSSで表現したボタンテクニック。
See the Pen Shiney Button by Jessica Biggs (@bigglesrocks) on CodePen.
Hover and Shine #Codevember_10
反射エフェクトと立体感を同時に表現したボタンスタイル。
See the Pen hover and shine #codevember_10 by John Garcia (@johnbgarcia) on CodePen.
ラインのみでスタイリングしたゴーストボタンに、斜めスリットのアニメーションを加えています。
See the Pen Animated Ghost Button by Cameron (@numerical) on CodePen.
こちらもCSSのみで表現できるアニメーションテクニックで、部分的にオーバーレイを残しています。
See the Pen CSS button hover effect by Julia (@sfoxy) on CodePen.
Ghost Button Animation – Dribbble
なめらかなドロップシャドウを加えることで、より洗練されたスタリッシュな雰囲気を演出します。
See the Pen Ghost Button Animation – Dribbble by Valentine (@wintr) on CodePen.
クリックするとローディングアニメーションが開始するテクニック。
See the Pen Plotly loading button by Sara Bee (@doeg) on CodePen.
マウスをクリックすることでクルクルと回転しだすエフェクト。
See the Pen Weeeeee by Mattia Astorino (@equinusocio) on CodePen.
マウスホバーすると電子回路を流れる電気のようなエフェクトが。
See the Pen Atom Button by Paraskevas Ntinakis (@perry_nt) on CodePen.
ボタンをクリックするとメールアドレスの登録フォームが表示されます。
See the Pen Notify Me by Danny (@ExtremelyGinger) on CodePen.
こちらもボタンクリックで登録フォームを表示するテクニック。
See the Pen One line Signup by Vineeth.TR (@vineethtr) on CodePen.
Googleのマテリアルデザインを元にしたスタイリングで、クリックするたびに絵文字アイコンが空から降ってきます。
See the Pen Material UI Button by Eric Adamski (@ericadamski) on CodePen.
ふわふわと浮かぶ様子をCSSアニメーションで表現したボタン。
See the Pen floating button #codevember_06 by John Garcia (@johnbgarcia) on CodePen.
下へ進むボタンをさまざまなスタイルで表現した素材集。
See the Pen demo:CSS scroll down button by Naoya (@nxworld) on CodePen.
下に続くコンテンツへの遷移を促すアニメーションエフェクト、ちょっとした驚きをユーザーに与えるテクニック。
See the Pen Scroll down icon animation by Thomas Nägele (@xonic) on CodePen.
