ミギムキ

[CSS] コピペで使える「押せる感」「押した感」のあるボタン

やりたいこと

サンプルコード

html

<a href="#" class="btn_push">ボタン</a>
スポンサー広告

CSS

.btn_push { display: inline-block; position: relative; padding: 1em; margin: 0px 0px 5px 0px; width: 18em; background-color: #3388dd; color: #fff; text-align: center; text-decoration: none; } .btn_push:after { position: absolute; bottom: -5px; left: 0px; width: 100%; height: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #18548f; content: ""; } .btn_push:active { transform: translateY(5px); } .btn_push:active:after { height: 0px; }

仕組み、解説、補足など

スポンサー広告