【すぐに役立つ!】CSSで作るボタンデザイン12選

公開日 : 最終更新日 :

  • コーディング

みなさんこんにちは!AndHAエンジニアチームです。

今回は、新人コーダー兼デザイナーの私がHTMLとCSSだけでボタンデザイン12個を実装していきます!

実装するデザインは、弊社デザインチームの公式Twitterにて以前投稿したボタンデザインアイデアから拝借しました。

(Twitterのほうもどうぞよろしくお願いします!!)

シンプルな沈むボタン

See the Pen
btn01
by and_ima (@and-im)
on CodePen.

グラデーションが移動するボタン

See the Pen
btn02
by and_ima (@and-im)
on CodePen.

ネオンが光ったように見えるボタン

See the Pen
btn03
by and_ima (@and-im)
on CodePen.

平面で押し込まれるニューモーフィズムのボタン

See the Pen
btn04
by and_ima (@and-im)
on CodePen.

円が膨らむボタン

See the Pen
btn05
by and_ima (@and-im)
on CodePen.

右下へ塗りがずれるボタン

See the Pen
btn06
by and_ima (@and-im)
on CodePen.

ドットの枠が実線になるボタン

See the Pen
btn07
by and_ima (@and-im)
on CodePen.

アイコンが光るボタン

(アイコンはCSSで実装可能な簡単なものに差し替えております。ご了承ください。)

See the Pen
btn08
by and_ima (@and-im)
on CodePen.

背景が回転するボタン

See the Pen
btn09
by and_ima (@and-im)
on CodePen.

背景色が横に伸びるボタン

See the Pen
btn10
by and_ima (@and-im)
on CodePen.

矢印が横に伸びるボタン

See the Pen
btn11
by and_ima (@and-im)
on CodePen.

内枠が広がって沈むボタン

See the Pen
btn12
by and_ima (@and-im)
on CodePen.

いかがでしたでしょうか?

ぱっと見簡単そうなのに、デザイン通り実装しようとすると案外難しい!見た目以上に複雑なコードになったボタンがちらほらです(笑)
もっと良い書き方があるかもしれないので、引き続き勉強していきます。

コーディング学習の際にはいきなりサイトトレースをしようとせずに、このようにパーツ単位で練習していくと細かいところまで学べてgoodですよ!

ではまた!

この記事をシェア

  • Twitter
  • Facebook
  • hatena-bookmark

合わせて読みたい