CSSだけで「思わず押したくなるボタン」を作る方法2（立体化＆押せるボタン）

ボタン本体と下線の色は、MUIの Flat UI Colors を参考にしています。

<a href="#" class="btn-type-border">ボタン</a>

.btn-type-border{
   display: inline-block;
   text-decoration: none;
   padding: 10px 50px;
   font-weight: bold;
   color: #fff; /* 文字色 */
   border-radius: 4px;
   background: #3498DB; /* ボタン本体の色 */
   border-bottom: 6px solid #2980B9; /* ボタン立体部の色 */
}
.btn-type-border:hover{
   color: #fff; /* マウスオーバー時の文字色 */
}

border-bottom を簡単に紹介

border-bottomは、要素の下辺に表示する境界線のスタイルを定義するプロパティで、下表のプロパティを一括で指定できます。

border-bottomで各プロパティを指定する場合は、

• 半角スペースで区切ります。
• 順不同で省略もできます
  • styleの初期値がnoneなので、これを省略するときはwidthの指定が必要になります。

ボタンの高さを変えるのは
線の幅のサイズを変えるだけです。

/* 一括指定する場合 */
border-bottom: 12px solid #2980B9; /* ボタン立体部の色 */

/* 線の幅だけ指定する場合 */
border-bottom-width: 12px;

高さの違うボタンを並べると
片方はスイッチON、もう片方はスイッチOFF に見えますよね…

パターン1　： margin-topで調整

新しいクラス名「btn-push1」

▼ まず、高さだけを変えた時の動作を確認してみましょう。

<a href="#" class="btn-push1">PUHS1</a>

.btn-push1{
   display: inline-block;
   text-decoration: none;
   padding: 10px 50px;
   font-weight: bold;
   color: #fff;
   border-radius: 4px;
   background-color:#3498DB;
   border-bottom: 15px solid #2980B9;
}
.btn-push1:hover{
   color: #fff;
   border-bottom-width: 6px; /* 下線の幅サイズ */
}

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

おやおや？
押したようには見えませんよね。

というか、
下にあるもの全部が上に動いてしまいます。

これは、減らした高さの分、
要素の高さ自体が減ってしまい
下のコンテンツに影響します。

そこで！

幅の差分を、要素の上余白として追加し、調整します。

今回のサンプルでは
「15px － 6px ＝ 9px」

.btn-push1:hover{
   color: #fff;
   border-bottom-width: 6px;
   margin-top: 9px; /* 高さ調整 */
}

これでポイントすると
押したように見えるボタンになります。

数値は、お好みの高さに合わせて
変更＆計算してください。

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

<a href="#" class="btn-push1">PUHS1</a>

.btn-push1{
   display: inline-block;
   text-decoration: none;
   padding: 10px 50px;
   font-weight: bold;
   color: #fff; /* 文字色 */
   border-radius: 4px;
   background-color:#3498DB; /* ボタン本体色 */
   border-bottom: 15px solid #2980B9; /* 立体部分 */
}
.btn-push1:hover{
   color: #fff;
   border-bottom: 6px solid #2980B9; /* 立体部分 */
   margin-top: 9px; /* 空間調整 */
}

押した時に凹ませる場合は
:hover を :active に変えます！

ボタン本体と下線の色は、MUIの Flat UI Colors を参考にしています。

<a href="#" class="btn-type-shadow">ボタン</a>

.btn-type-shadow{
   display: inline-block;
   text-decoration: none;
   padding: 10px 50px;
   font-weight: bold;
   color: #fff; /* 文字色 */
   border-radius: 4px;
   background: #2ECC71; /* ボタン本体の色 */
   box-shadow: 0 10px 0 0 #27AE60; /* 立体部分 */
}
.btn-shadow:hover{
   color: #fff; /* マウスオーバー時の文字色 */
}

box-shadow を簡単に紹介

box-shadowは、要素の周囲にシャドウ効果を表示するプロパティです。

影は二重、三重・・・と、重ねて設定することができます。

ぼかし効果や拡散効果など、効果の組み合わせが幾通りにもできるので、複雑なデザインに活用できます。

Y軸（垂直方向）への影を指定することでborder-bottomと同じようなスタイルに仕上げることができます。

• 各値は半角スペースで区切ります。
• 影をボックス内側に設定する場合は「色」の後にinsetと記述します。
• 影の指定をカンマ「,」で区切って記述すると、複数の影を表示できます。

パターン1　： transform で下に動かす

新しいクラス名「btn-push2」

最初に、マウスオーバー時に高さを減らした場合、どのように変化するかを見てみましょう。

<a href="#" class="btn-push2">PUHS2</a>

.btn-push2{
   display: inline-block;
   text-decoration: none;
   padding: 10px 50px;
   font-weight: bold;
   color: #fff;
   border-radius: 4px;
   background-color:#2ECC71;
   box-shadow: 0 4px 0 0 #27AE60;
}
.btn-push2:hover{
   color: #fff;
   box-shadow: none;
   transform: translateY(4px); /*下に移動*/
}

ボックスの高さを「0」にする場合は、box-shadow指定を無くすことなので、noneで指定できます。

もし少しでも高さを残すなら、Y軸の数値を変更します。

transform は、要素を変形できるプロパティで移動が可能です。

減らした高さの分を下に移動させることで、押したように見せます。

この場合は、4px － 0px ＝ 4px 下に移動させます。

押したら凹ませる場合は
:hover を :active に変えます！

パターン2　： relative と top で調整

position プロパティの relative を設定して、topで位置を指定します。

新しいクラス名「btn-push2」

この場合「6px」分が下へ移動しているので、上から「6px」の位置に配置するよう指定します。

<a href="#" class="btn-push3">PUHS3</a>

.btn-push3{
   display: inline-block;
   text-decoration: none;
   padding: 10px 50px;
   font-weight: bold;
   color: #fff;
   border-radius: 4px;
   background-color:#2ECC71;
   box-shadow: 0 6px 0 0 #27AE60;
}
.btn-push3:hover{
   color: #fff;
   box-shadow: none;
   position: relative;
   top: 6px;
}

positionプロパティは
覚えておくととっても便利！

【CSS】Positionプロパティを理解して要素を自在に配置！

Cocoonのブログカードに表示するラベルの位置を調整することを目標に、CSSのpositionプロパティを勉強してみましょう。

pasoviva.com