html - 如何在 CSS 中设置此按钮的样式以显示为按下?

标签 html css button

该按钮具有这些基本样式,使其看起来像 3D 平面外观。

background-color: #7a7acc;
border: none;
border-radius: 10px;
box-shadow: 0px 4px 0px #4747b2;
color: #fff;
font-family: Lato;
font-size: 16pt;
font-weight: bold;
height: 36px;

我怎样才能让它看起来像现在使用 box-shadow 时那样向下推,除了上面的内容?我考虑过使用 -4px 而不是 4px,但这不会将按钮向下移动 4 个像素。我怎样才能正确地做到这一点?我还必须将文本向下移动 4 个像素。

最佳答案

如果你想让按钮在按下时显示为按下

添加和激活伪类然后相对位置然后添加一个top:#px给它

.btn:active{
position:relative;
top:4px;
}

这是一个演示 http://jsfiddle.net/p5w4x/

关于html - 如何在 CSS 中设置此按钮的样式以显示为按下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23417970/

相关文章:

jquery - 输入类型='text'元素不占用空格

javascript - 防止 Javascript 被执行两次

html - border-radius.htc 在特定页面上的 IE8 中断(在更简单的演示页面中工作)

html - 如何从css中排除一个元素?

css - 报纸文章链接 href

java - 从 NetBeans GUI Builder 在 JPanel 中显示图像

javascript - D3.js 如何使用折线图在我的图例中添加工具提示

javascript - Angular javascript ng模型不起作用

button - VSTO C# : How to disable the popup (tooltip) on a Ribbon Button

python - 如何获得 tkinter 按钮的大小?