:active
伪类并更改框阴影垂直偏移值。根据相对于绝对父元素的输入,调整已激活元素的top
值。
.button {
position: absolute;
}
#startBtn {
font-family: OpenSans;
color: #FFFFFF;
background-color: #00FF7C;
border: 1px solid #00FF7C;
border-radius: 5px;
box-shadow: 0px 5px 0px #00823F;
position: relative;
top: 0px;
transition: all ease 0.3s;
}
#startBtn:active {
box-shadow: 0 3px 0 #00823F;
top: 3px;
}
<div class="button">
<input type="button" id="startBtn" value="Let's begin">
</div>
#startBtn:active {
box-shadow: 0 1px 0 #00823F;
bottom:-4px;
}
hover
属性:#startBtn:hover {
/* your css code here */
}
另一个选择是使用按钮生成器,例如buttongarage.in来生成您的按钮和悬停效果的代码。