【総数200超】CSSで作るボタンデザインまとめ【コピペOK】

cssで（コピペで）できるボタンのデザインを探している！！そんな時に見る記事です。

通常のwebデザインに使える、ベーシックなボタンから、アッと驚く奇抜なデザインのボタンまで総数200以上のボタンをまとめました。

デザイン制作のお供になるようなボタンはもちろん、ゴリゴリにアニメーションするボタンや、インスピレーションも湧き上がるようなボタンまで幅広く集めています。

それではどうぞ！

【総数200超】コピペで作るCSSボタンデザインまとめ

派手なホバーエフェクト14つセット

派手ですがシンプルなcssで書かれており、参考になります。

See the Pen button hover effects by Jordano Aragão (@jordanoaragao) on CodePen.

鮮やかなグラデーションが素敵

ホバーでグラデーションの方向を変えることで実現できます。

See the Pen Gradient Button Hover by Muhammed Erdem (@JavaScriptJunkie) on CodePen.

斜め下からヌルッと

斜めからヌルッと来るのが気持ちいいですね。

See the Pen CSS button hover effect by Julia (@sfoxy) on CodePen.

ホバーでボタンの形が変わる

存在感抜群！ユニークです。

See the Pen Grandient and Hover Buttons by dAsper (@dAsper) on CodePen.

モダンなアニメーションがかっこいい

シンプルながら動きが洗練されていて参考になりますね。

See the Pen Button hover animation by Danil Goncharenko (@Danil89) on CodePen.

ボーダーが広がる

発想の勝利です。印象的なアニメーションですね。

See the Pen Button Hover Animation by Bhautik Bharadava (@bhautikbharadava) on CodePen.

テキストの動きは必見

js使いそうですが、実は使いません。とってもリアルですね！

See the Pen Button hover effect by badurski (@badurski) on CodePen.

アイコンが大きくなる

動きがシンプルで汎用性がありそうです。

See the Pen
Sullivan Buttons by David Darnes (@daviddarnes)
on CodePen.

基本的なホバーアニメーションのセット

アニメーションの基礎が詰まっています！保存しちゃいましょう。

See the Pen Collection CSS3 buttons by Andrés Bedoya (@Angelfire) on CodePen.

煙や液体のように動くテキスト

実はcssだけで実現しています。作った人変態ですね、、

See the Pen Button Hover Effects #2 by Aaron Iker (@aaroniker) on CodePen.

人参のようなボタンがファンキー

形がユニークです。どことなく美味しそう

See the Pen Perspective button hover effect by Comehope (@comehope) on CodePen.

バウンドするアニメーションが面白い

バウンドするアニメーションって地味に人気ですよね。

See the Pen Cool buttons by Riccardo Zanutta (@rickzanutta) on CodePen.

超リアルなラジオボタン

cssでここまでできちゃいます。超リアル！

See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.

クリックでアプリのようなアニメーション

イージングはjsを使用。華麗なアニメーションですね。

See the Pen UI // Button Selection Type by Cosimo Scarpa (@coswise) on CodePen.

斜めのアニメーションが面白い

動きがインパクト抜群で面白いですね。

See the Pen Button Hover Effect by Daniel Gonzalez (@dan10gc) on CodePen.

ホバーでキラリ

上品なアニメーションが揃っています。

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

YEAAAAAAAAAAAAAAH!

YEAAAAAAAAAAAAAAAAAAAH！！！押せばあなたも叫びたくなるはず。

See the Pen A button hover effect by Himalaya Singh (@himalayasingh) on CodePen.

クリックでヌルッとメニューが展開

スライムのようなアニメーションがかわいいです。

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

クリックでヌルッとメニューが展開②

上のボタンの派生ver。

See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.

カラフルなアニメーションの詰め合わせ

カラフルでホバーするのが楽しいですね。

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.

ホバーでボーダーの囲いが出現

ボーダーで囲いが出るのがユニークです。

See the Pen Button Hover Draw – CSS Only by Luke Meyrick (@lukemeyrick) on CodePen.

クリックすると、おじさんが、、あっ

これは人生で2回遭遇しないボタンです笑　ホバーしてみてください。

See the Pen Click the button! by Bård N Hovde (@bnhovde) on CodePen.

クリックでキラキラパーティクル

とってもキレイです。女性からの人気も高そう。

See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen.

モダンなアニメーションが心地いい

この手のアニメーションはBtoBのサイトでもウケがよさそう。

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

マイクラのような3Dボタン

完全にマイクラです笑

See the Pen 3D Retro Buttons by Mike @ Titan Global Tech (@b1tn3r) on CodePen.

ホバーでキラリと光るボタン

さっきもキラッとボタンはありましたがより光強め。

See the Pen cool button by canvasplay (@canvasplay) on CodePen.

まるで本物。押した時気持ちよさそう

べこっと凹む感じが気持ちいい！どこかでみんな押したことあるはず。

See the Pen Squishy Toggle Buttons by botanin (@botanin) on CodePen.

上品なシャドウが素敵

フワッと出現するシャドウに気品を感じます。

See the Pen Accessible Fancy Button by Sun Dai (@sundaisun) on CodePen.

色が変わるラジオボタン

あまりみないデザインですが、ユーザビリティ高そうなデザインで良いですね。

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

クリックから連続したアニメーション！

送信ボタンが最終的にチェックマークに。動きが素敵です。

See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen.

押した時がキモチイイ

押した時がキモチイイシリーズ。一昔前の家電にこんなボタンありましたね。

See the Pen Minimal Circular 3D Buttons by Louis Lazaris (@impressivewebs) on CodePen.

波紋のように広がるボタン

見てるだけでも面白いです。

See the Pen Pulsing Button by Sean Michael (@seansean11) on CodePen.

クリッピングマスクな驚きのラジオボタン

これも発想の勝利ですね。どうやって作っているんだろう。。

See the Pen Subscribe Toggle Button | Smudge The Cat (Woman Yelling At Cat Meme) by Himalaya Singh (@himalayasingh) on CodePen.

いいね→アニメーションがかわいい

とってもかわいい顔文字が出現。顔文字のアニメーションはgifです。

See the Pen Facebook reactions in Mac style by Himalaya Singh (@himalayasingh) on CodePen.

クリックでロードバーが出現

驚きだけでなく、親切さも感じるアニメーションです。

See the Pen Submit Button (Anime.js) by Andrew Millen (@andrewmillen) on CodePen.

ネオンなボタンがおしゃれ

近未来チックなデザインのボタンです。cssのみで作れちゃいます。

See the Pen Glass Buttons by leggant (@leggant) on CodePen.

ホバーでどこかいっちゃう

どこかいっちゃうけどなんだかんだで戻ってきてくれます。

See the Pen 35 Ways to Disappear by coder787 (@coder787) on CodePen.

中華エ○サイトにありがちなボタン

存在感だけはバツグンですね。存在感だけは。。

See the Pen Flashing & Flickering buttons by Shane Clarke (@shane-clarke) on CodePen.

ホバーでネオンが素敵

人気シリーズのネオンボタン。光具合が強めです。

See the Pen Neon Buttons by Yug Mundhada (@codHUNTer) on CodePen.

押した時じわっと気持ちいい

またまた押した時気持ちいいシリーズ。フラットなボタンとは一線を画したデザインです。

See the Pen Skeuomorphic Buttons (Realistic 3D effect) by Jouan Marcel (@jouanmarcel) on CodePen.

クリックでクールなsvgアニメ

ロケットが飛び立ちます。クオリティ高いですね。

See the Pen Rocket Launch Button by Aaron Iker (@aaroniker) on CodePen.

クシャッとねじれるアニメーション

凄まじい表現力です。canvasアニメーションをフル活用しています。

See the Pen Liquid button by Tobias Reich (@electerious) on CodePen.

ボーダーの動きがかわいい

女子向けのサイトで使えそう。繊細でかわいいですね。

See the Pen Stripped Diagonal Button Single Border by Zeindelf (@Zeindelf) on CodePen.

それcssでできるの？！な驚きのボーダーボタン

cssでそんなボーダーできるのか。。地味だけど個性バツグンなデザイン。

See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.

個性的なアニメーションが面白い

もはや文章での表現が難しいです笑　つい押したくなりますね。

See the Pen UI Button Hover Effect #2 by Daniel Gonzalez (@dan10gc) on CodePen.

グラデが超クール

グラデが変わるアニメーションは根強い人気を誇ります。

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.

ブクブク、キラキラ動く

もはや何をしているのか分かりませんが、凄いということだけは分かります笑

See the Pen Colourful navbar buttons (React) by tobywilson1 (@tobywilson1) on CodePen.

押すと3Dに傾く

地味だけど驚きを与えてくれるボタン

See the Pen Flat-to-3D buttons by Matteo Belfiore (@heartbox) on CodePen.

ホバーでグリッチエフェクト

発想が凄いです。ボタンにこのアニメーションは天才的です。

See the Pen Old CRT Button by John Wilson (@johnbarrierwilson) on CodePen.

ボタンってそっちのボタンか、、(音量注意)

これまた世界で2つと無いボタンです笑　音出るのでそこだけ注意で。

See the Pen Button, button, who’s got the button by Jeff Ayer (@DeptofJeffAyer) on CodePen.

まとめ

いかがでしたか？

今回はcssで作るボタンデザインをまとめてみました。
初心者の人はコードで参考になる部分も多いと思いますし、ある程度web制作をやっている人であればワンパターンになりがちなボタンデザインを見直すきっかけになったと思います。

随時数を増やしていくと思いますので、よければまた覗いてみてください。
皆さまの参考になれば嬉しいです。

それではまた！