CSSでお洒落なボタンを作ってみよう！カテゴリー別に紹介【コピペOK】

こんにちは、最近二度寝の習慣が身について、毎日会社に遅刻しそうになるので、二度寝対策を学びたいみもざです。

さて、本題に入りたいと思います。

CSSの勉強を進めていくと、学んだことを活かしてもっと凝ったデザインをしたくなってくると思います。

そこで今回は、

を紹介するので、一緒にCSSでボタンをユニークなデザインにしてみましょう！

CSSでお洒落なデザインのボタンを作りたい方はもちろん、CSSに関しての理解を深めたい初学者も、ぜひこの記事を参考にしてくださいね。

【復習】基本的なボタンの作り方

まずは、復習がてらに基本的なボタンの作り方を紹介します。

ボタンを作成するためにHTMLで使用するタグ

buttonタグ

buttonタグは、特に深い意味はなくボタンを作成できるタグです。ページ遷移を出来るだけでなく、type属性を使えば送信やリセットをするときに使用できます。また、閉じタグがあるため疑似要素（＝一部の要素に対してスタイルをあてられる）が使用できるのもポイントです。

inputタグ

inputタグは、フォーム内で使い、type属性で「type=”button”」と指定をすればボタンを作成でき、buttonタグとほとんど同じ役割をしますが、buttonタグでは使える疑似要素は使用できないです。なので、inputタグでのボタン指定は使用しないことがほとんどです。

aタグ

aタグは、リンクを指定したいときに使います。CSSを使うことによって、ボタンのように作成することも可能です。CSSを使ってのボタンを作成するとき、一般的に使われているのがaタグなので、今回の記事でもaタグを用いて様々なボタンを作成していきたいと思います。

フラットなボタンを作ってみよう！

ここでは、シンプルでどこにでも使用できるフラットなボタンの作り方を紹介します。

フラットなボタン１

ボーダーで囲み、マウスオーバーされた時に背景と文字のカラーが変化するボタンです。

See the Pen
flat_btn1 by mimosa (@im_mimosa)
on CodePen.

マウスオーバーされた時に要素を変えたい時には、:hoverを使うことがポイントです。

フラットなボタン２

ボーダーで囲み、マウスオーバーされた時にボーダーが破線になり文字のカラーが変化するボタンです。

See the Pen
flat_btn2 by mimosa (@im_mimosa)
on CodePen.

「border: dashed」を指定することによって、破線になります。

フラットなボタン３

マウスオーバーされた時に、下線部分が上にあがり、下線部分と文字のカラーが変化するボタンです。

See the Pen
flat_btn3 by mimosa (@im_mimosa)
on CodePen.

フラットなボタン４

マウスオーバーされた時に、下線が左から右に出て、カーソルを外した時に下線が消えるボタンです。

See the Pen
flat_btn4 by mimosa (@im_mimosa)
on CodePen.

フラットなボタン５

マウスオーバーされた時に、文字が光るように指定したボタンです。

See the Pen
flat_btn5 by mimosa (@im_mimosa)
on CodePen.

「text-shadow」を指定することによって、光っているように見せることができます。

立体的なボタンを作ってみよう！

ここでは、遊び心がある立体的なボタンの作り方を紹介します。

立体的なボタン１

立体的に見えるシンプルなボタンです。

See the Pen
solid_btn1 by mimosa (@im_mimosa)
on CodePen.

「border-bottom」を指定して、下の線の色を全体的の色よりも濃くすることによって立体的に見えます。

立体的なボタン２

立体的なボタン１の応用として、マウスオーバーされた時にボタンが沈む動きを付けたボタンです。

See the Pen
splid_btn2 by mimosa (@im_mimosa)
on CodePen.

:hoverのところに、「transfrom」と「border-bottom」を使うことにより、マウスオーバーされた時に沈んでいるように見えます。

立体的なボタン３

影を付けることによりさらに立体感が増したボタンです。

See the Pen
solid_btn3 by mimosa (@im_mimosa)
on CodePen.

立体的なボタン４

文字が凹んで見えるように作ったボタンです。

See the Pen
solid_btn4 by mimosa (@im_mimosa)
on CodePen.

文字のカラーを暗めにして、「text-shadow」で周りに薄いカラーを適用することによって文字が凹んで見えます。

立体的なボタン５

文字が浮き上がって見えるように作ったボタンです。

See the Pen
solid_btn5 by mimosa (@im_mimosa)
on CodePen.

「text-shadow」で左と上に明るめの影、右と下に暗めの影を入れることによって、文字が浮いて見えます。

丸みのあるボタンを作ってみよう！

ここでは、可愛く仕上げたいときに使える丸みのあるボタンの作り方を紹介します。

丸みのあるボタン１

サイドに丸みを作り、マウスオーバーされた時に背景と文字のカラーが変わるシンプルなボタンです。

See the Pen
circle_btn1 by mimosa (@im_mimosa)
on CodePen.

丸みのあるボタン２

正円を作り、マウスオーバーされた時に背景と文字のカラーが変わるシンプルなボタンです。

See the Pen
circle_btn2 by mimosa (@im_mimosa)
on CodePen.

「width」と「height」を同じ長さにし、「border-radius: 50%」と指定することによって、正円が作れます。

丸みのあるボタン３

正円の下に、濃いめの線と影を付けることにより立体的に見えるボタンです。

See the Pen
circle_btn3 by mimosa (@im_mimosa)
on CodePen.

グラデーションを使ってボタンを作ってみよう！

ここでは、他の人とデザインに差をつけたいときに使えるグラデーションを使ってのボタンの作り方を紹介します。

グラデーションボタン１

一見普通のボタンに見えますが、マウスオーバーさせた時に背景がグラデーションになるボタンです。

See the Pen
grad_btn1 by mimosa (@im_mimosa)
on CodePen.

「linear-gradient」を使うことによって、グラデーションを指定できます。

グラデーションボタン２

背景を左から右に向かって徐々に赤に近づいていくグラデーションカラーにし、マウスオーバーされたときに、背景のオレンジ部分が少し広がるグラデーションにしたボタンです。

See the Pen
grad_btn2 by mimosa (@im_mimosa)
on CodePen.

アニメーションを使ってボタンを作ってみよう！

ここでは、ユーザーを退屈させないようにしたいときに使えるアニメーションを使って動きのあるボタンの作り方を紹介します。

アニメーションボタン１

マウスオーバーされたときに、左から右へと背景がスライド表示されるボタンです。

See the Pen
animation_btn1 by mimosa (@im_mimosa)
on CodePen.

「transfrom」を使うことによって、スライドされるアニメーションを作ることができます。

アニメーションボタン２

マウスオーバーされたときに、左から下、右から上へと線のカラーが変わっていくボタンです。

See the Pen
animation_btn2 by mimosa (@im_mimosa)
on CodePen.

「::before」「::after」と「transition」を組み合わせることによって、動きがある色の変化をします。

まとめ

いかがでしたか？今回は、

を紹介しました。

CSSはたくさんのプロパティがあるので、自由に自分の好きなスタイルのデザインに出来て便利ですよね。

よければこの記事を参考にして、サイトの雰囲気に合ったボタンをデザインしてみてくださいね。