ぷちゅ的

工業高校生ですが何か?

コピペで簡単!おしゃれなボタンデザイン集(CSSのみ)

【スポンサーリンク】

f:id:ktrw3200:20170625213553j:plain

数年前に作ったファイルがたまたま見つかったので、今回はそれを公開したいと思います。JavaScriptは一切使用しておりません(数年前はそんな知識なかった)。

みなさんのサイトを綺麗に飾ってくださいねー!

ボタンのデザイン

グラデーション

See the Pen ButtonDesign-3 by Puchun (@puchun) on CodePen.

背景をグラデーションにします。「45deg」はグラデーションの角度を示し、ここでは「45°」を表します。

夏っぽい色にしてみました!

ストライプ

See the Pen ButtonDesign-4 by Puchun (@puchun) on CodePen.

 先程のグラデーションを「repeating-」でくりかえすことによって、ストライプを表現することができます。先ほどと同様に「-45deg」の部分を変更することにより、ストライプの角度を変更することができます。

 縁を丸める

See the Pen werWje by Puchun (@puchun) on CodePen.

 先日、ツイッターの外観が変わりましたが、それっぽいデザインです。「border-radiusの値を高さの半分にすることで、このようにできます。

 

ホバー時のエフェクト

ホバー時のエフェクトはクラス名の後に「:hover」をつけることで、設定できます。

色を滑らかに変える

ふわっと変わります。

See the Pen RgLaXX by Puchun (@puchun) on CodePen.

ここでは、「trandition」タグを使うことによってなめらかな変化を出しています。「0.3s」は変化に要する時間で、「0.3秒」を表します。

透過する

See the Pen ButtonDesign-2 by Puchun (@puchun) on CodePen.

  「opacity」で要素の透過を設定することができます。「0.7」は透過率で、ここでは「70%」を表します。

透過していることをわかりやすくするため、htmlのコードに背景を挿入していますが、実際に挿入するときには、<body ~>は必要ありません。

 影を付ける

See the Pen awLZjr by Puchun (@puchun) on CodePen.

 影は「box-shadow」で追加することができます。ここでは「0px 0px 5px 1px」と指定していますが、以下の意味を表します。

  • 1つ目の値:横方向の影の位置
  • 2つ目の値:縦方向の影の位置
  • 3つ目の値:影のぼかし(0でぼかしなし)
  • 4つ目の値:影の広がり

 クリック時のエフェクト

クリック時のエフェクトを追加するには、クラス名の後に「:active」書きます。

ボタン風

See the Pen ButtonDesign-7 by Puchun (@puchun) on CodePen.

 ボタンの立体感を、影のぼかしを0にすることで表現できます。そして、クリック時に影を消し、ボタンの位置を下げます。

シェイクする

See the Pen ButtonDesign-8 by Puchun (@puchun) on CodePen.

 クリック時にシェイクするアニメーションをつけてみました。

 ▶参考にしたサイト

Creative Button Styles

 

 編集後記

デザインなどは、数年前に作ったものなのですが、そのコードをどのようにブログに貼り付けるか結構悩みましたw。考えた末、「CodePen」を利用することにしまして、デモが表示されて結構便利なのですが、読み込み字間が長くなって、申し訳ない!