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

Question

需要做一个类似上图中形状的返回按钮 参考 一个按钮CSS3 返回按钮 这个例子，做出了如下的返回按钮：特殊样式 返回按钮按下弹起的颜色效果只有右边的div有效，而左边的小箭头是:before和:after加进去的，请问，它...

天蓬老师 · Answer

嗨,你需要的是這個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;
}

高洛峰 · Answer

暴力一點的解決方案是，使用圖片。什麼圓角啊漸層啊不相容的問題都給我起開

阿神 · Answer

可以使用邊框漸層border-image:linear-gradient(.....)

天蓬老师 · Answer

我有一個想法：不要用 border 做小箭頭，用 transform 變形做小箭頭。用 transform 的話就可以用背景漸層了。要注意的一點是，由於小箭頭要旋轉 45 度，你的背景漸層也要旋轉 45 度。