CSSだけで、つい押したくなるような立体感のあるボタンを実装する方法を紹介していきます。
マウスカーソルを当てたとき、クリックしたときにボタンが押されているようなアニメーションもつけてみました。
＼ ホバーしてください ／
＼ クリックしてください ／
コピペしてすぐに使える全体コードや、実装方法の解説をしてきますので、興味のある方はぜひ参考にしてみてください。
【コピペ用】立体感のあるボタンの実装コード
HTMLとCSSの実装コードを用意しましたので、コピペしてお使いください。
<a href="リンク先のURLを記入" class="btn">BUTTON</a>/* ボタン本体 */
.btn {
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none; /* 文字の下線を消す */
}マウスホバー時にアニメーションをつけたい場合は、以下のコードを追加します。
/* ホバー時 */
.btn:hover {
box-shadow: none;
transform: translateY(5px);
}クリック時にアニメーションをつけたい場合は、以下のコードを追加します。
/* クリック時 */
.btn:active {
box-shadow: none;
transform: translateY(5px);
}上記のコードをコピペすることで、以下のようなボタンを実装することができます！
DEMOにある他の色を使用したい方は、background-colorとbox-shadowの部分を以下のコードと入れ替えてください。
/* 黄色 */
background-color: #ffd150;
box-shadow: 0 5px 0 #ffc41d;
/* 青色 */
background-color: #61b0e2;
box-shadow: 0 5px 0 #369ada;
/* 緑色 */
background-color: #34b496;
box-shadow: 0 5px 0 #298c75;これで全体コードの紹介は終わりです。
次でコードの解説をしていきますので、コードを理解したい方、カスタマイズしたい方は読み進めてみてください。
【解説】立体感のあるボタンの実装コード解説
ここからは実装コードの解説をしていきます。
HTMLとCSSの順に進めていきますね。
HTML
<a href="リンク先のURLを記入" class="btn">BUTTON</a>ボタンにはリンクを設定することが多いので、aタグを使用します。
スタイルを適用するために、わかりやすいクラスを指定して下さい。ここではbtnというクラスを付与しています。
あとはhref属性にリンク先のURLを記入し、aタグ内に文字を入れて完成です。
CSS
/* ボタン本体 */
.btn {
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none; /* 文字の下線を消す */
}
/* ホバー時 */
.btn:hover {
box-shadow: none;
transform: translateY(5px);
}
/* クリック時 */
.btn:active {
box-shadow: none;
transform: translateY(5px);
}以上が全体のCSSコードです。
- ボタン本体の装飾
- ホバー時にアニメーションをつける
- クリック時にアニメーションをつける
上記に分けて解説していきます。
ボタン本体の装飾
.btn {
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none; /* 文字の下線を消す */
}まずはボタン本体の装飾を見ていきましょう。
まずdisplayプロパティは、inline以外を指定してください。
理由としては、inline要素にはtransformプロパティが適用されず、ホバー時やクリック時にボタンが沈むようなアニメーションをつけることができなくなるからです。
よく使われるinline-block, block, flexの中から状況に合わせて使い分けるのがいいですね。
続いてボタンの色の指定部分を見ていきます。
ボタン本体の背景色にはbackground-color、ボタン下部の色はbox-shadowを使用します。
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */色を指定する際は、box-shadowの色をbackground-colorよりも暗くしてください。
そうすることでより立体感が増し、クリックしたくなるような見た目になります。
Sassを使用している方は、darken()関数を使用することで簡単に暗めの色を設定できるので便利です。
background-color: #e3364a;
box-shadow: 0 5px 0 darken(#e3364a, 10%); /* 指定色を10%暗くする */これら以外は特にルールはないので、自由にカスタマイズしてください。
ホバー時にアニメーションをつける
マウスホバー時にボタンが沈むようなアニメーションをつけるには、擬似クラス:hoverを使用します。
.btn:hover {
box-shadow: none;
transform: translateY(5px);
}まずbox-shadowにnoneを指定することで影を消します。
さらにtranslateY(5px)でボタン本体を下方向に5px移動させます。
こうすることで、ボタンを押しているようなアニメーションを実装しているというわけですね。
5pxの部分は、box-shadowに指定した数値と同じにしてください。
.btn {
box-shadow: 0 5px 0 #ca1c30;
}
.btn:hover {
transform: translateY(5px);
}クリック時にアニメーションをつける
マウスホバー時にアニメーションをつけるには、擬似クラス:activeを使用します。
.btn:active {
box-shadow: none;
transform: translateY(5px);
}中身のコードは上と全く同じですので、説明は省きますね。
以上で実装コードの解説は終わりです！
もし理解できない箇所がある場合は、コメント欄にご記入ください。
立体感のあるボタンのカスタマイズ方法
以下にカスタマイズ方法をいくつか紹介しておきます。
- 色を変更する
- transitionをつけてアニメーションを滑らかにする
- 影の太さを変更する
色を変更する
色を変更する場合は、background-colorとbox-shadowを調整します。
/* ボタン本体 */
.btn {
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
/* ホバー時 */
.btn:hover {
box-shadow: none;
transform: translateY(5px);
}
/* クリック時 */
.btn:active {
box-shadow: none;
transform: translateY(5px);
}黄色
background-color: #ffd150;
box-shadow: 0 5px 0 #ffc41d;青色
background-color: #61b0e2;
box-shadow: 0 5px 0 #369ada;緑色
background-color: #34b496;
box-shadow: 0 5px 0 #298c75;transitionでアニメーションを滑らかにする
DEMOでは、ホバー・クリックすると即時にボタンが沈むようになっていますが、transitionプロパティを使用して滑らかに沈むようにすることも可能です。
/* ボタン本体 */
.btn {
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a;
box-shadow: 0 5px 0 #ca1c30;
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
transition: all 0.3s;
}
/* ホバー時 */
.btn:hover {
box-shadow: none;
transform: translateY(5px);
}
/* クリック時 */
.btn:active {
box-shadow: none;
transform: translateY(5px);
}影の大きさを変更する
ボタン下部の影の部分の太さは、box-shadowプロパティで調整することができます。
/* ボタン本体 */
.btn {
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a;
box-shadow: 0 8px 0 #ca1c30;
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
/* ホバー時 */
.btn:hover {
box-shadow: none;
transform: translateY(8px);
}
/* クリック時 */
.btn:active {
box-shadow: none;
transform: translateY(8px);
}あまり数値を大きくしすぎると不自然になるので、5pxあたりがちょうどいいかと思います。
また、box-shadowで太さを変更した場合は、ホバー時・クリック時のtranslateYにも同じ値を設定してください。
【まとめ】CSSのみで立体感のあるボタンを作成する方法
CSSのみで立体感のあるボタンを作成する方法を紹介しました。
ボタンの厚みをbox-shadowで表現することで簡単に実装できましたね。
ボタンはフラットデザインで実装されることが多いですが、立体感を出すことでよりボタンとして認識してもらいやすくなるので、ぜひ試してみてください。
コメント