影付き【ボタン】
HTML
<a href="#" class="btn-square-shadow">BUTTON</a>
CSS
.btn-square-shadow {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square-shadow:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
Javascript
入力無し
最近Webでよく見かける厚みのあるボタンです。クリック(タップ)すると、沈みます。カーソルを当てるだけで沈むようにしたい場合は「:active」を「:hover」に変えましょう。上のボタンに影をつけて、さらに立体感を出してみました。