htmlのbuttonをcssだけでおしゃれなデザインにするおすすめページ

僕はデザインの勉強をしようと思ったことも一瞬だけあったのですが、センスが無いからすぐ諦めました(笑)

もはやWEBページ全体やHTMLのボタンなどパーツのデザインは世の中にたくさんテンプレートがあるので、それらを活用してなんとかなっています。

 

パーツで言うとボタンのデザインはクリック率にも影響するのでお客さんもシビアです。

デザイナーがいる場合はボタンも画像で作成してもらいますが、そうでない場合はよさげなデザインのボタンをいくつか用意してお客さんに選んでもらうようにしています。

そのときのボタンはCSSだけで作るものが多く、ほぼコピペです(笑)

コピペで仕事なんてぬるい！と思われるかもしれませんが、僕はデザイナーではないので。ちゃんとサーバーサイドのプログラミングしています。

 

今回はCSSだけで作れるおしゃれなボタンを紹介しているページをまとめました。

サルカワさん

なにせ100パターンも紹介されているので、たいていここでよさげなボタンが見つかります！

サンプルコードもついているので、HTML＋CSSを勉強されている方にも扱いやすそうです。

SNSボタンが個人的には使いやすくて助かりました。

[btn class=”simple”]サルカワさん[/btn]

GrowGroupさん

上半分のオーソドックスなものは他のページにも載ってるようなものですが、後半に動きのあるボタンがCSSだけで作ってるのにすごいです。

動きのあるボタンを手軽に導入したい場合はおすすめです。

[btn class=”simple”]GrowGroupさん[/btn]

sonicmoov labさん

「CSSだけでおされな～」と紹介し始めた記事ですが、このsonicmoov labさんのボタンはJavaScriptなども使っています。

でもソースも公開されていますし、動きがすばらしい！！

むしろすごすぎて、僕にはどう活用すればいいか分からないくらい(笑)

多少難しくても動きのあるボタンが欲しい方はおすすめです。

 

[btn class=”simple”]sonicmoov labさん[/btn]

NxWorldさん

NxWorldさんはCSSで作成するボタンを紹介しています。

基本的には上で紹介したボタンと同じようなものが多いなという印象ですが、ちょっと変わったものもあったので紹介します。

あとページの作りが好きです。

[btn class=”simple”]NxWorldさん[/btn]

まとめ

他にもきれいなデザインのボタンを紹介しているサイトはたくさんあるのですが、似たようなものも多いので絞って紹介しました。

ただコピペするだけでも使えますが、色や大きさなどを変えれば可能性は無限ですね！

おしゃれなサイト作成がんばってください！