HTMLでベースのボタンを作って、幅や高さ、背景や文字の色、hoverやactiveなどをCSSで作り動きのあるボタンが作れます。
今回はベーシックなクリックするとボタンが沈む、押下ボタンを作ってみました。下記CSSをクラスに使ってみてください。
CSS
.btn-press-down {
display: inline-block;
background-color: rgb(55, 71, 79);
padding: 15px 25px;
color: #fff;
text-align: center;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 5px rgb(37, 49, 55);
}
.btn-press-down:active{
box-shadow: none;
position: relative;
top: 5px;
}
Preview
BUTTON