是否可以在純CSS中製作此特定按鈕效果？

Question

我正在爲一個學校項目設計一個網站，我試圖爲按鈕和導航設計一個特定的樣式，但我不知道如何去做這件事。

我認爲做一個邊框效果，但我停了下來，因爲我意識到，它不只是涉及到改變個人身邊的顏色，但在一半切割雙方和不同的着色這些作品。它後面的div上的漸變效果可能會起作用，但不僅會變得複雜，而且在我要像3D形狀中的邊緣那樣銳利時會看起來模糊。這是可行的，還是我必須使用圖像？

編輯：哇，看起來像那裏有很多的方法。 Code Golf，任何人？

Answer 1

是的，具有漸變背景和嵌套元素。在不支持CSS3的瀏覽器中，這不是跨瀏覽器兼容的。

直播例如：JSFiddle

的HTML：

<a href="#" class="button"><span>Click Me</span></a> 

的CSS：

.button { 
    display: inline-block; 
    padding: 4px; 
    background: rgba(115,127,255,1); 
    background: -moz-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,127,255,1)), color-stop(50%, rgba(68,81,220,1)), color-stop(51%, rgba(68,81,220,1)), color-stop(100%, rgba(68,81,220,1))); 
    background: -webkit-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%); 
    background: -o-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%); 
    background: -ms-linear-gradient(top, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%); 
    background: linear-gradient(to bottom, rgba(115,127,255,1) 0%, rgba(68,81,220,1) 50%, rgba(68,81,220,1) 51%, rgba(68,81,220,1) 100%); 
} 

.button span { 
    display: inline-block; 
    background: #4755E7; 
    color: #fff; 
    padding: 0.5em 0.75em; 
} 

Answer 2

這裏一種元素溶液，simplier標記：d

<b>Im sexy and i know it!</b> 

http://jsfiddle.net/ebdq20vm/1/

b { 
    padding: 20px; 
    display: inline-block; 
    color: #FFF; 
    background: #5d67e9; 
    background: -moz-linear-gradient(top, #5d67e9 50%, #4451dc 51%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5d67e9), color-stop(51%, #4451dc)); 
    background: -webkit-linear-gradient(top, #5d67e9 50%, #4451dc 51%); 
    background: -o-linear-gradient(top, #5d67e9 50%, #4451dc 51%); 
    background: -ms-linear-gradient(top, #5d67e9 50%, #4451dc 51%); 
    background: linear-gradient(to bottom, #5d67e9 50%, #4451dc 51%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d67e9', endColorstr='#4451dc', GradientType=0); 
    position: relative; 
    z-index: 5; 
} 
b:before { 
    content:''; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    right: 4px; 
    bottom: 4px; 
    background-color: #4755E7; 
    display: block; 
    z-index: -1; 
} 

Answer 3

沒有CSS梯度，如果你想支持IE8上的解決方案：http://jsfiddle.net/2am780pq/

HTML：

<a class="button">Cool</a> 

CSS：

.button { 
    display: inline-block; 
    position: relative; 
    background-color: #4755e7; 
    padding: 10px 20px; 
    color: #fff; 
} 

.button:before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    bottom: -5px; 
    left: -5px; 
    right: -5px; 
    margin: auto; 
    background-color: #4451dc; 
    z-index: -1; 
} 

.button:after { 
    content: ''; 
    position: absolute; 
    top: -5px; 
    bottom: 50%; 
    left: -5px; 
    right: -5px; 
    margin: auto; 
    background-color: #5d67e9; 
    z-index: -1; 
} 

Answer 4

沒有梯度，也沒有僞elemts ，box-shadow也可以完成這項工作： http://codepen.io/anon/pen/NPaZBd

a{ 
 
    display: inline-block; 
 
    color: #FFF; 
 
    padding:5px 1em; 
 
    line-height:2em; 
 
    background:#4755E7; 
 
    margin:1em; 
 
    box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9, 
 
    0.8em -0.8em 0 -0.5em #5d67e9, 
 
    -0.8em 0.8em 0 -0.5em #4451dc, 
 
    0.8em 0.8em 0 -0.5em #4451dc; 
 
} 
 
/* add an inside blurry border too ? */ 
 
a:nth-child(even) { 
 
    box-shadow:-0.8em -0.8em 0 -0.5em #5d67e9, 
 
    0.8em -0.8em 0 -0.5em #5d67e9, 
 
    -0.8em 0.8em 0 -0.5em #4451dc, 
 
    0.8em 0.8em 0 -0.5em #4451dc, 
 
    inset 0 0 1px 
 
}

<a href="#"> link</a> 
 
<a href="#"> link link</a> 
 
<a href="#"> link bigger link</a> 
 
<a href="#"> link even bigger works still</a>