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>
こんな感じのボタンが表示されます。
コメント