コピペでOK！CSSでできるおしゃれなボタン

2021年12月13日

今回はコピペだけで使えるボタンを集めてみました。
早速行ってみましょう！

1. CSS Button Animations

ボタンはシンプルですが、ホバーにちょっとしたアクセントがあります。
飛行機アイコンはフォームなどで使えそうでよいですね。

See the Pen
CSS Button Animations by Alex Loomer (@atloomer)
on CodePen.0

2. CSS Fizzy Button

ホバーするとしゅわしゅわと後ろで色がはじけるボタン
サイトの入り口や、アクセントが必要な場所でよいかも

See the Pen
CSS Fizzy Button by Jamie Coulter (@jcoulterdesign)
on CodePen.0

3. Six Pure CSS Button Hover Animations

こちらもボタンはシンプルだけど、ホバーに一工夫。
特にIDLEは四角がくるくると回ってかわいいです。

See the Pen
Six Pure CSS Button Hover Animations by Christian (@CTNieves)
on CodePen.0

4. Flush button

今度はボタンの中でしゅわしゅわ

See the Pen
Flush button by Kamil (@KamilDyrek)
on CodePen.0

5. 20 Button Hover Effects

20種類ものCSSボタン。ホバーでボタンが動いたりしていてかわいいです。

See the Pen
20 Button Hover Effects by Rosa (@RRoberts)
on CodePen.0

6. CSS button hover

ホバーすると左右に揺れるボタン。ぷるぷる。

See the Pen
CSS button hover by Danil Goncharenko (@Danil89)
on CodePen.[/codepen_embed

7. Purely CSS Button

押すと波紋のように広がって背景色が変わるボタン
グラデがかかって立体的なのも素敵です。
[codepen_embed height="300" default_tab="html,result" slug_hash="QYwNeR" user="imreyesjorge"]See the Pen
Purely CSS Button by Jorge Reyes (@imreyesjorge)
on CodePen.0

8. Simple CSS Button Hover Effect

クリックすると枠が固定されるCSS　どのボタンが選択されているのかわかりやすいです。

See the Pen
Simple CSS Button Hover Effect by Andréas Lundgren (@adevade)
on CodePen.0

9. CSS Button with Glowing Background

よくみるとグラデがゆらゆらゆれています

See the Pen
CSS Button with Glowing Background by Dhanish (@dhanishgajjar)
on CodePen.0

10. CSS Button with Hover Effect

ネオンのようなホバーエフェクトです。

See the Pen
CSS Button with Hover Effect by Kniw Studio (@JeremyWink)
on CodePen.0

11. 70s CSS Button

今風のカジュアルなボタン。動きもあってよいです

See the Pen
70s CSS Button by Jordan Halvorsen (@halvo)
on CodePen.0

12. Customizable 3D Button using SASS

ホバーするとちょっぴりネオンっぽいボタン。テキストにシャドウまでかかってます。

See the Pen
Customizable 3D Button using SASS by Daniel Weidner (@dweidner)
on CodePen.0

13. CSS Button

浮き出るシリコンのようなボタン。立体表現がきれいです。

See the Pen
CSS Button by Jason Kinney (@jason-kinney)
on CodePen.0

14. Button Practice

ホバーすると広がるボタン。かわいいです。

See the Pen
Button Practice by Ivan Villa (@ivillacreative)
on CodePen.0

15. CSS Button transitions

ホバーエフェクトがたくさん。

See the Pen
CSS Button transitions by Robin Treur (@RobinTreur)
on CodePen.0

16. CSS button hover

ふわっと色が下から上がってきます

See the Pen
CSS button hover by Karlo Videk (@karlovidek)
on CodePen.0

17. CSS Button

ホバーするとボタンが分身の術

See the Pen
CSS Button by Jarrod Thibodeau (@jarrodthibodeau)
on CodePen.0

18. CSS + SVG Button Animation

動きがたくさんあって楽しいホバーアニメーションです。

See the Pen
CSS + SVG Button Animation by Clément (@clmntclmnt)
on CodePen.0

19. CSS Button on Plaid

ボタンでできたボタンです

See the Pen
CSS Button on Plaid by Marcus Connor (@marcusconnor)
on CodePen.0

20. 100 days css Button N° 045

ホバーすると枠がキランとなるボタン

See the Pen
100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira)
on CodePen.0

21. Pure CSS Button with Ring Indicator

波紋でボタンをアピールできるボタン。CVエリアに使えそうですね。
depen_embed height=”300″ default_tab=”html,result” slug_hash=”ZEzxWPy” user=”mccombsc”]See the Pen
Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc)
on CodePen.[/codepen_embed]