我已经创建了一个带有一些效果的按钮。当我在浏览器中进行测试时,只有在Mozilla浏览器中正常工作。我无法确定为什么它不能在-webkit-浏览器中工作。有人能告诉我为什么这段代码不起作用吗?请检查这个fiddle:http://jsfiddle.net/sarfarazdesigner/Qtw3x/
以下是html代码:
这里是 CSS。
<button name="feat-btn" id="feat-btn" class="push-button" type="submit">
<span>Submit</span>
</button>
这里是 CSS。
.push-button {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 18px;
padding: 0;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.push-button span:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #357536 transparent -moz-use-text-color;
border-image: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-style: solid solid none;
border-width: 5px 5px 0;
content: "";
display: block;
margin: 0 -1.7em;
overflow: hidden;
text-indent: -9999px;
}
.push-button span:before {
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
content: ".";
display: block;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.push-button span {
background-color: #4FB051;
border-bottom: 1px solid #6FBE70;
display: inline-block;
height: 49px;
line-height: 50px;
margin-bottom: 5px;
min-width: 110px;
padding: 0 1.7em;
position: relative;
}
.push-button:hover span{background-color:#52a853;}
先在mozilla
中检查它,然后您就会明白它将如何显示,或者您可以查看下面的图像。
这是在mozilla
中查看的样子:
![enter image description here](https://istack.dev59.com/5GHOI.webp)
这是在Webkit浏览器中查看的样子:
![enter image description here](https://istack.dev59.com/eKn9g.webp)
span
标签?而不是直接将文本放在开头和结尾的button
标签之间? - zuallauz