目次
ボタンデザインのサンプルです。コピペで使えます。
HTML
<div class="push-button_box">
<a href="#" class="push-button">PUSH!</a>
</div>
CSS
.push-button_box{
margin:50px auto;
width:30%;
}
.push-button {
display: inline-block;
background-color: #d60000;
color: #fff;
font-weight: bold;
font-size: 1.5rem;
text-decoration: none;
padding: 16px 40px;
border-radius: 999px;
position: relative;
box-shadow: 0 8px 0 #a10000;
transition: all 0.1s ease;
text-align: center;
width: 100%;
}
.push-button:hover {
transform: translateY(4px);
box-shadow: 0 4px 0 #a10000;
}