如何设置带有阴影的按钮样式,使其看起来像被按下?
我尝试使用box-shadow: ... ;
。但这没有任何影响。
最佳答案
通过使用:active
创造性地设置:focus
或box-shadow: inset ...;
pseudo classes的样式
使用:active
伪类:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}
<button>
Click me
</button>
使用
:focus
伪类:button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
Click me
</button>