影付き【ボタン】

影付き【ボタン】

Division: CSS

Subject: ボタン

最近Webでよく見かける厚みのあるボタンです。クリック(タップ)すると、沈みます。

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」に変えましょう。上のボタンに影をつけて、さらに立体感を出してみました。

類似記事