下面是我们在网站上使用的按钮图片,它是 .png。
我们想看看我们是否可以在标准按钮上使用 CSS 来接近它。
渐变从顶部:#E14C5B 到中间:#D33742 到底部:#B61C27,带有几个圆 Angular 径向像素。
在 CSS 中这甚至可能吗?
最佳答案
我会让你开始......
HTML
<button>Submit</button>
带有一些背景渐变的 CSS
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
截图:
如果你想在点击时看到某种点击反馈类型,你还可以添加:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
这仅用于 -webkit
浏览器的前缀。无论您支持什么,您都需要提供适当的供应商前缀。
关于html - 带有 2 个渐变按钮的 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18771386/