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

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

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

 

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

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

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

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

 

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

サルカワさん

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

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

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

GrowGroupさん

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

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

sonicmoov labさん

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

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

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

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

 

NxWorldさん

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

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

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

まとめ

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

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

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA