本サイトはアフィリエイト広告を利用しています

CSSだけで「思わず押したくなるボタン」を作る方法(1)

- スポンサーリンク -

CSSで作るボタンは、ネットを回ればいくらでもデザインのサンプルとCSSコードが配布されています。シンプルなものから凝ったものまで様々ですが、中でも「押した気にさせる」パターンを初めて見た時は感動しました。

CSSっていうのは実に面白いですね。

感心してるばかりでは脳が無いので、その仕組みについて勉強してみました。

基本のボタンデザイン

「ボタンを作る」といっても、要するに「要素に背景色や枠線を設定して、ボタンっぽいサイズにしてるだけ」というのが実態です。

要素のスタイル指定に丸み、影、グラデーションなどを追加することで、個性的なボタンが出来上がって行きます。

ボタン用に使う要素はdivタグやbuttonタグもありますが、「divはボタンではない」という記事などを読む、他のページに遷移するのが目的であれば、aタグを使うのが良いようです。

こちらの記事ではaタグを使ってボタンの仕組みを探って行きます。

デザイン:見た目をボタンっぽくする

リンクを設定する a要素を、ボタンっぽくしてみます。

まずは基本形

<a href="#">ボタン</a>
※ 「#」部分にはリンク先URLを記述します。

aタグには、リンクであることがわかりやすいスタイルが規定値で設定されているので、スタイル指定をしなくても、下記のように表示されます。

文字の色は「青色」で、アンダーラインが引かています。
ポインタを合わせると「赤色」に変化します。

見慣れたテキストリンクの表示形ですね。

デフォルトスタイルが邪魔な場合はリセットが必要です。

例えば、テキスト下に表示される下線を消す場合は、text-decorationプロパティを使います。

a{text-decoration: none;}

これで下線が表示されなくなります。

ただ、これだとaタグ全てに同じスタイルが設定されてしまうため、

CSSクラスを追加して
スタイリングしていきます。

▼ 新しいクラス名「hoge-btn」

  • ボタンの色:tomtao
  • 文字色:白色
  • 文字の太さ:太字
<a href="#" class="hoge-btn">ボタン</a>
 .hoge-btn{
   text-decoration: none;
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   background: tomato; /* ボタンの色 */
   color: #ffffff; /* 文字色 */
   font-weight: bold; /* 文字の太さ */
}

display プロパティに inline-block を指定したので、
要素の幅は中身に合わせて広がります。

border-radius プロパティを追加して
丸みのあるボタンに変えることができます。

  • 角の丸み=8px
border-radius: 8px;

指定値を変えて、もっと丸くできます。

  • 角の丸み= 50px
border-radius: 50px;

▼ ここまでのコードまとめ

<a href="#" class="hoge-btn">ボタン</a>
 .hoge-btn{
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   background: tomato; /* ボタンの色 */
   color: #fff; /* 文字色 */
   font-weight: bold;
   border-radius: 50px; /* 丸み */
}

変化:マウスオーバー時の設定

次に、ボタンにマウスポインタを乗せた時に「変化」するよう指定してみましょう

これも、CSSを使えば簡単に実現可能です。

使うのは、疑似クラス「:hover」です。

「フバー」じゃないよ!

「ホバー」だよ!

要素の後に「:hover」と記述することで、要素の上にマウスオーバーした時のスタイルを指定できます。

今回は、

  • マウスオーバー時に ボタンの を変える
  • マウスオーバー時に ボタンを半透明 にする
  • マウスオーバー時に ボタンを動かす

この3タイプのボタンを作ってみましょう。

ボタンの色 を変える [background]

サンプルでは、以下の項目を指定してみます。

  • セレクタ.hoge-btn:hoverを追加し、背景の色を「灰色=gray」に指定
.hoge-btn:hover{
   background: gray; /* 背景色 */
} 

ポイントしてみてください

トランジション効果を追加して
色がゆっくり変化するようにしてみます。

  • .hoge-btntransitionプロパティを追加して、切り替わり効果を設定
.hoge-btn{transition: all 1s ease;}

 比較してみてください。 

トランジション効果なしボタン

transition を簡単に紹介

トランジション効果というのは、要素と要素の間の変化に切り替え効果を与えるものです。

transitionは以下のプロパティの一括指定プロパティです。

プロパティ名説明
プロパティ
transition-property
トラジションを適用するプロパティを指定する初期値:all(全てのプロパティが対象)
個別のプロパティに指定も可能。
デュレーション
transition-duration
アニメーションの時間を定義する初期値:0s(秒)
任意の数値 + 単位
単位は、s(秒)、ms(ミリ秒)
ディレイ
transition-delay
アニメーションを開始の遅延を定義する初期値:0s(秒)
任意の数値 + 単位
単位は、s(秒)、ms(ミリ秒)
タイミング・ファンクション
transition-timing-function
アニメーション変化の度合を定義する・ease(初期値。開始と終了を滑らかに)
・ease-in(ゆっくり開始)
・ease-out(ゆっくり終了)
・ease-in-out(開始と終了をゆっくり)
・linear(一定に変化)

各プロパティをtransitionに記述する際は、半角スペースで区切ります。任意の順序で指定できますが、数値を2つ指定する場合は、1つ目がduration、2つ目がdelay、とみなされます。省略したプロパティは、初期値が適用されます。

上のサンプルでは、変化がわかりやすいように duration(デュレーション)値を「1s(秒数)」と、少し長めにしました。

ボタンでは「0.3~0.4s」が良く使われているので、そちらに変えてみます。

  • アニメーションの時間を「0.3s」に書き換え
.hoge-btn{transition: all 0.3s ease;}

大きな効果は感じなくても、

「効果なし」より優しく・・・変化してると思います。

有ると無いとじゃ大違い~

ボタンにはトランジション効果は大事だね!

▼ ここまでのコードまとめ

<a href="#" class="hoge-btn">ボタン</a>
 .hoge-btn{
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   text-align: center;
   font-weight: bold;
   background: tomato; /* ボタンの色 */
   color: #fff; /* 文字色 */
   border-radius: 50px; /* 丸み */
   transition: all 0.3s ease; /* トランジション */
}
.hoge-btn:hover{
   background: gray; /* マウスオーバー時背景色 */
}

ボタンを透明化 する [opacity]

opacityプロパティを使うと、要素の不透明度を指定できます。

サンプルでは、以下の項目を指定してみます。新しいクラス名「hoge-btn2

  • opacityで、不透明度を「0.7」に指定する
<a href="#" class="hoge-btn2">ボタン</a>
 .hoge-btn2{
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   text-align: center;
   font-weight: bold;
   background: yellowgreen; /* ボタンの色 */
   color: #fff; /* 文字色 */
   border-radius: 50px; /* 丸み */
}
.hoge-btn2:hover{
   opacity: 0.7; /* 透明度 */
} 

ポイントしてみてください

opacity を簡単に紹介

opacityは、要素の色の透明度を指定します。

値の指定方法意味
0.1~1.0までの値「0」は完全な透明。
「1」は完全な不透明。(全部見える状態)

柔らかい変化がお好みなら
トランジション効果を追加しましょう。

.hoge-btn2{transition: all 0.3s ease;}

▼ ここまでのコードまとめ

<a href="#" class="hoge-btn2">ボタン</a>
 .hoge-btn2{
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   text-align: center;
   font-weight: bold;
   background: yellowgreen; /* ボタンの色 */
   color: #fff; /* 文字色 */
   border-radius: 50px; /* 丸み */
   transition: all 0.3s ease; /* トランジション */
}
.hoge-btn2:hover{
   opacity: 0.7; /* 透明度 */
}

ボタンを動かす [transform]

transformプロパティを使うと、要素を回転、移動、拡大縮小、傾斜に変形できます。

サンプルでは、以下の項目を指定してみます。新しいクラス名「hoge-btn3

  • transformで、「3px」動かします。
<a href="#" class="btn3">ボタン</a>
 .hoge-btn3{
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   text-align: center;
   font-weight: bold;
   background: indigo; /* ボタンの色 */
   color: #fff; /* 文字色 */
   border-radius: 50px; /* 丸み */
}
.hoge-btn3:hover{
   transform: translateY(3px);
} 

ポイントしてみてください

transform を簡単に紹介

transformプロパティは、トランスフォーム関数を指定して対象要素を変形させます。変形には、移動、回転、傾斜、拡大・縮小があります。

トランスフォーム関数意味()内の指定方法
none初期値。要素を変形しません。none
translate()要素のxy座標を移動します。移動距離の数値 + 単位
translateX()要素のx座標を移動します。(水平方向)移動距離の数値 + 単位
translateY()要素のy座標を移動します。(垂直方向)移動距離の数値 + 単位
scale()要素をxy座標方向に拡大・縮小します。scale(2)で2倍に拡大
scale(0.5)で1/2に縮小
scaleX()要素をx座標方向に拡大・縮小します。負の値を指定すると、要素は裏返る
scaleY()要素をy座標方向に拡大・縮小します。負の値を指定すると、要素は裏返る

して滑らかな動きにするなら
トランジション効果を追加します。

.hoge-btn3{transition: all 0.3s ease;}

▼ ここまでのコードまとめ

<a href="#" class="hoge-btn3">ボタン</a>
 .hoge-btn3{
   display: inline-block;
   padding: 10px 50px; /* 内部余白 */
   text-align: center;
   font-weight: bold;
   background: indigo; /* ボタンの色 */
   color: #fff; /* 文字色 */
   border-radius: 50px; /* 丸み */
   transition: all 0.3s ease; /* トランジション */
}
.hoge-btn3:hover{
   transform: translateY(3px);
}

transition(トランジション)

transform(トランスフォーム)

似てるから間違えそうだぶぅ~

知っておきたい box-sizing:border-box

ボタンデザインを求めたサイト巡りの中で気づいたのですが、必ずと言っていいほど指定されているのが、box-sizing:border-boxでした。

これは何の意味があるのかな?と不思議でしたが、レスポンシブ対応にはぜひ取り入れておきたいプロパティのようです。

box-sizing プロパティ

box-sizing は、ボックスサイズの算出方法を指定するプロパティです。

もっとわかりやすく言うと、要素の幅(width)と高さ(height)に、padding と border を含めるかどうかを定義します。

値には、次の算出方法を指定します。

算出方法意味
content-box初期値。paddingとborderを幅と高さに含めない。
(例)
 .box {width: 350px; border: 10px solid black;} は 370px の幅のボックスを描画。
border-boxpaddingとborderを幅と高さに含める。
(例)  
.box {width: 350px; border: 10px solid black;} は、ボックスの幅が 350px、コンテンツ領域の幅を 330px として描画。

解説を読むと「なるほど!」と思いますが、ここでそれを書くには知識が乏しいので割愛しますが、レスポンシブデザインのサイトなら、あらかじめ全ての要素に設定しておくとGood!ということなのです。

全ての要素に適用するのが良いということで、全称セレクタ(*)への指定が勧められています。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

幸いなことに、テーマCocoonでは親テーマでbox-sizing:border-boxが適用されているので、気づかないうちに対応が出来ていたようです。

別テーマを使っている場合は、検証ツールを使って確認してみると良いと思います。

なお、box-sizingのことは「サルワカ」さんのサイトが大変詳しいのでおすすめです。

長くなったので、続きは別記事に分けました。

ボタンを立体化する方法と、押したように見せる方法は、Part2 の記事をご覧ください。


- スポンサーリンク -
HTML&CSS
タイトルとURLをコピーしました