CSS │ ささやかに浮き上がるボタンを最速で作る

CSSでフワッと浮き上がる控えめなボタンを作ってみました。

CSSに下記のように記載して、

.modest_button {
  padding: 0.5em 2em;
  display: inline-block;
  text-align: center;
  box-shadow: 0px 0px 1px 0px lightgrey;
  transition: .3s;
}
.modest_button:hover {
  box-shadow: 0px 3px 6px 0px lightgrey;
  transform: translateY(-2px);
  border: none;
}

下記のようにclassにmodest_buttonを指定すると、

<p><a href="#" class="modest_button">ボタン</a></p>

こんな感じのボタンが表示されます。

ボタン