【CSS】クリックしたらボタンが凹むようにする方法

今回は、クリックしたらボタンが凹むようにする実装を紹介したいと思います!

押せるようなボタンを作りたい人は是非参考にしてください。

【CSS】クリックしたらボタンが凹むようにする方法

完成形はこちら!

ボタンを押してみると、凹むのがわかるでしょう。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

コピペできるようになっているので、是非真似してコーディングしてみてください!

HTML

クラスを含んだaタグを用意します。

CSS

◎1行目〜9行目

まずはaタグに幅を持たせるようにしたいので、「display: inline-block;」でインラインブロック要素に。

そして、「padding: 20px 40px;」で余白をつけます。

「text-decoration: none;」でaタグにデフォルトでつく下線を消します。

「background-color: #333;」と「color: #FFF;」でボタンに色をつけていきます。

「border-bottom: solid 4px #627295;」でボタンの影を作成。

最後に「border-radius: 10px;」で、ボタンに少し丸みをつけます。

◎10行目〜14行目

ボタンをクリックするとボタンが凹むようにしたいので、擬似クラスである「active」をつけます。

activeはボタンをクリックしてから離すまで指定したスタイルが適応されます。

activeの時に「transform: translateY(4px);」を指定して、「border-bottom: solid 4px #627295;」の4px分をボタンをクリックした際に消えるようにします。

最後に、「border-bottom: none;」を指定することで、ボタンを押したらborderが消えて凹むように見えますよ!

まとめ

以上が、クリックしたらボタンが凹むようにする実装でした。

簡単にできるので、是非参考にしてください!

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事