html - 特殊样式按钮 点击按下去要有凹下和弹起的效果

问题描述

需要做一个类似上图中形状的返回按钮

参考 一个按钮CSS3 返回按钮 这个例子，做出了如下的返回按钮：特殊样式 返回按钮按下弹起的颜色效果只有右边的p有效，而左边的小箭头是:before和:after加进去的，请问，它的颜色怎么设置 为渐变色？ 达到让它看起来和右边的部分浑然一体 的效果。。。

问题解答

嗨,你需要的是这个CSS Button

如下

.myButton { background-color:#44c767; -moz-border-radius:28px; -webkit-border-radius:28px; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; text-shadow:0px 1px 0px #2f6627;}.myButton:hover { background-color:#5cbf2a;}.myButton:active { position:relative; top:1px;}回答2：

暴力一点的解决方案是，使用图片。什么圆角啊渐变啊不兼容的问题都给我起开

可以使用边框渐变border-image:linear-gradient(.....)

我有一个思路：不要用 border 做小箭头，用 transform 变形做小箭头。用 transform 的话就可以用背景渐变了。要注意的一点是，由于小箭头要旋转 45 度，你的背景渐变也要旋转 45 度。