mozmoz

| ウェブのあれこれ中心のブログです

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

2021年12月13日

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

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

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]

22. Fancy CSS Button

シンプルでおしゃれなボタン

See the Pen
Fancy CSS Button
by Waterproof Web Wizard (@waterproofwebwizard)
on CodePen.0

23. Only CSS – Button hover

くるくる動くボタンです

See the Pen
Only CSS – Button hover
by Hoonseok Park (@parcon)
on CodePen.0

24. Bootstrap-free CSS Buttons

グラデーションボタンがたくさんそろっています。

See the Pen
Bootstrap-free CSS Buttons
by Tommy Hodgins (@tomhodgins)
on CodePen.0

25. CSS Button

アンドロイドボタン!

See the Pen
CSS Button
by Turret [http://turret.in] (@teamturret)
on CodePen.0