コピペOK!CSSで作る押したくなるボタン達10+【CodePenより】

スポンサーリンク

最近はすごいですね、CSSだけで作れるボタンはないかな~と思ったら、Googleで “CSS ボタン ジェネレーター" と検索すれば簡単にコピペできちゃう。でも、面白いアイディアを知りたいなら、CodePen が役立ちますね!

CodePenでワタシ的にいいなと思ったものを備忘録も兼ね紹介してみます。

※紹介した中に、一部、JavaScriptを使用しているものがあります。

CodePen のホームページより
CodePen のホームページより

スポンサーリンク

[View Compiled] ボタンについて

記事内で CodePen の画面を埋め込み表示していますが、[CSS] ではなく、[SCSS] と表示されているものがあります。その場合、[View Compiled] ボタンを押下すると、[CSS] タブが表示されます。

SCSSとは

SCSS は、Sassy CSS で、 拡張子 .scss のファイルのようです。

Sass (Syntactically awesome style sheets) というものがあるんですね。

簡単に言うと、 CSS の プリプロセッサ だそうです。えーっと、CSSを拡張したものだと理解しました。似たようなもので、 Less と Stylus というのもあるようですね。知らなんだー。

Sassのホームページキャプチャ
Sassのホームページキャプチャ

では、クールでおしゃれなボタンたちを見ていきましょう!

シンプルなボタン

ホバーした事が分かって、押した事が分かる、シンプルなボタンですね。

See the Pen 3D Button by Aditya Bhandari (@takeradi) on CodePen.

3D Button https://codepen.io/takeradi/pen/ZWExXr

興奮しているボタン

ホバーした後の衝動がすごい(笑)ADHDっぽいボタンと言えよう。

See the Pen The Excited Button w/ dynamic animation 🤓 by Jhey (@jh3y) on CodePen.

The Excited Button w/ dynamic animation 🤓 https://codepen.io/jh3y/pen/NWWMxbV

ホバーで矢印が開くボタン

さらに一歩、踏み込んで情報を得ようという気になる!?

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

Button Hover https://codepen.io/kathykato/pen/rZRaNe

クールなボタン

”シャキーン!”と言いたくなるボタン。テキストも少し移動してて芸が細かい。

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

cool button https://codepen.io/canvasplay/pen/WXWobd

ホバーでボーダーが動くよ

See the Pen Sass button border hover effect mixin by Giana (@giana) on CodePen.

Sass button border hover effect mixin https://codepen.io/giana/pen/xdXpJB

プリズムボタン

ホバーした時がおしゃれ。JavaScriptを使わなくてもこういう事ができるんだなぁ。

See the Pen Prism Button Effect by Stix (@stix) on CodePen.

Prism Button Effect https://codepen.io/stix/pen/vgYwzG

おしゃれなボタンたち

ただただ素敵。

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

Accessible Fancy Button https://codepen.io/sundaisun/pen/ZpVBQW

素朴な手書き風枠線

クールなものも素敵だけど、こういう”ふぁんしー”な感じも好きなんですよね。

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

Imperfect Buttons https://codepen.io/tmrDevelops/pen/VeRvKX

ホバー効果いろいろ

一部、JavaScriptを使っているようです。

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

Button Hover Effects https://codepen.io/kjbrum/pen/wBBLXx

ホバー効果その他

こちらは クール。カッコよろしい感じです。

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

Collection of Button Hover Effects https://codepen.io/davidicus/pen/emgQKJ

液体っぽいボタン

JavaScript を使っているためAMPサイトなどでは使用できませんが、面白いので紹介します。

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

Liquid button https://codepen.io/electerious/pen/gOOLgjd

参考URL

スポンサーリンク

にほんブログ村 IT技術ブログ WordPressへ