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

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

- スポンサーリンク -

CSSだけで「思わず押したくなるボタン」を作る方法の第2弾です。

基本的なスタイルについては、入門編にあたる下の記事をご覧ください。

今回は立体的なボタンを作り、押せるボタンにしてみます。

尚、こちらの記事は、CSSでボタンを作る仕組みを理解することを主な目的にしています。そのため、サンプルボタンはシンプルなものしか扱っていません。

仕組みを理解すれば、コピペでもらってきたボタンのデザインも自分でアレンジができるようになるので、興味がある方はぜひご覧ください。

要素を立体的に見せる方法はいくつかあるようですが、

  • border-bottom プロパティを使う方法
  • box-shadow プロパティを使う方法

この2点を取り上げています。

border-bottom を使って立体化

要素の下に下線を表示して立体的に見せることができます。

使うのは、要素の境界に下線を指定するborder-bottomプロパティです。

立体化する(border-bottom)

ボタン本体下線の色は、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-width線の幅キーワード、数値+単位(px、em、他)
border-bottom-style線の種類none(初期値)、solid、dotted、dushed、duble、他
border-bottom-color線の色カラーネーム、カラーコード、rgb、hex、他

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

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

border-bottom: 幅 種類 色 ;

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

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

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

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

押せるボタンにする

「押せるボタン」というのは、高さの違うボタンを組み合わせることで実現します。

▼ 通常時

▼ 押した状態

疑似クラスを使って、マウスオーバー、またはクリック時の状態を指定します。

  • ポイントしただけで凹ませる場合は、疑似クラスの:hoverを使います。
  • 押したら凹ませる場合は、疑似クラスの:activeを使います。

お好みで使い分けましょう。

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

新しいクラス名「btn-push1

  • 通常時のボタンの高さ(下線の幅)・・・15px
  • マウスオーバー時のボタンの高さ・・・6px

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

<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 に変えます!

box-shadow を使って立体化

要素に影を指定するプロパティのbox-shadowを使って立体的に見せる方法もあります。

立体化する(box-shadow)

ボタン本体下線の色は、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と同じようなスタイルに仕上げることができます。

指定する値機能値の指定方法
offset-x(X軸)水平方向の影の距離を指定数値+単位(px、em、他)
offset-y(Y軸)垂直方向の影の距離を指定数値+単位(px、em、他)
blur-radius(ぼかし)影のぼかし具合省略可。
数値+単位(px、em、他)
spread-radius(拡散)影の広がり省略可。
数値+単位(px、em、他)
color(色)影のを指定省略可。
カラーネーム、カラーコード、他
inset影がつくのをボックスの外側から内側に変更します省略可。
記述形式

box-shadow:  水平方向 垂直方向 ぼかし 拡散 色 ;

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

押せるボタン にする

border-bottomの場合、枠線は要素の内側に表示されます。これに対してbox-shadowは、要素の外側に表示されます。

この違いがあるので、ホバー時の指定が異なります。

box-shadowで作った立体ボタンの場合は、

  • transform を使って下に動かす
  • relative と top を使って調整する

この2つのパターンのどちらかで行けます。

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

新しいクラス名「btn-push2

  • 通常時のボタンの高さ(下線の幅)・・・ 4px
  • マウスオーバー時のボタンの高さ・・・ 0(none)

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

<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
  • マウスオーバー時のボタンの高さ・・・0px

この場合「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プロパティは
覚えておくととっても便利!

ちょっと気になる…、border-bottom と box-shadow の違い

2つのプロパティの仕様が違うので、ホバー時の動作に違いが出ます。

box-shadowで表示される影(線)は要素の外側に表示されるので、影があっても無くても要素の高さは変わりません。そこで、影の高さが減ったら、その分を「下に移動させる」ことで、ボタンが動いたように見せています。

border-bottomで作ったボタンは、線の高さも含めて要素の高さです。下線の幅を減らすと、要素自体の高さが変わります。ボタンを下に移動させて押したように見せることはできますが、高さの異なる要素が交互に出たり消えたりするため、下のコンテンツに影響します。そこで「余白で埋める」ことでガタつきを無くすように調整しています。

ただ、ボタンの下に表示するものが無い場合や、高さ指定のあるボックスの中に配置するなど、配置する場所によっては影響が出ないこともあり、気づかないこともあるかもしれません。

意識して使い分けをできれば一番ですが、ボタンをクリックすると挙動がおかしいな・・・という時に、ちょっとだけこのことを思い出していただけると、修正のヒントになるかもしれません。


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