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

まずは基本形

<a href="#">ボタン</a>

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; /* 丸み */
}

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

• セレクタ.hoge-btn:hoverを追加し、背景の色を「灰色＝gray」に指定

.hoge-btn:hover{
   background: gray; /* 背景色 */
} 

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

• .hoge-btnにtransitionプロパティを追加して、切り替わり効果を設定

.hoge-btn{transition: all 1s ease;}

　比較してみてください。　

transition を簡単に紹介

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

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

各プロパティを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; /* マウスオーバー時背景色 */
}

サンプルでは、以下の項目を指定してみます。新しいクラス名「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は、要素の色の透明度を指定します。

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

.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; /* 透明度 */
}

サンプルでは、以下の項目を指定してみます。新しいクラス名「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プロパティは、トランスフォーム関数を指定して対象要素を変形させます。変形には、移動、回転、傾斜、拡大・縮小があります。

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

.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);
}