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

Question

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

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

Answer 1

Hi, what you need is this CSS Button

As follows

.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;
}

Answer 2

A more violent solution is to use pictures. Any issues such as rounded corners, gradients, or incompatibilities can be solved by me

Answer 3

You can use border gradient border-image:linear-gradient(.....)

Answer 4

I have an idea: don’t use border to make small arrows, use transform to make small arrows. If you use transform, you can use background gradient. One thing to note is that since the little arrow is rotated 45 degrees, your background gradient will also be rotated 45 degrees.