這個按鈕的css3

我附上了按鈕的圖像。在我正在使用的網站上只有這個圖像。它沒有PSD或PNG，所以我不確定哪種字體系列和大小。我被要求創建類似於到該圖像，多次嘗試後的CSS，而不是被設計和CSS的傢伙，我想出了這個CSS3

.test 
{ 
    border-top: 1px solid; 
    background: #ebebeb; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ebebeb)); 
    background: -webkit-linear-gradient(top, #ebebeb, #ebebeb); 
    background: -moz-linear-gradient(top, #ebebeb, #ebebeb); 
    background: -ms-linear-gradient(top, #ebebeb, #ebebeb); 
    background: -o-linear-gradient(top, #ebebeb, #ebebeb); 
    padding: 5px 10px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-box-shadow: #ebebeb 0 1px 0; 
    -moz-box-shadow: #ebebeb 0 1px 0; 
    box-shadow: #ebebeb 0 1px 0; 
    text-shadow: #ebebeb 0 1px 0; 
    color: #4d4c4d; 
    font-size: 12px; 
    font-family: font-family: Arial,sans-serif; 
    font-weight:lighter; 
    text-decoration: none; 
    vertical-align: middle; 
}

但字體大小和回地面仍有點過。我想這可能是一些css3大師在這裏有我的答案，我錯過了什麼是完全相同的副本？

這裏是我的小提琴http://jsfiddle.net/Fbpg6/

來源

2012-02-02 Autolycus

所有這些梯度無所事事。開始和結束顏色是相同的。

你在幾個地方也缺少一些顏色聲明。

看看THIS DEMO更接近。

（注我添加餘量只是它遠離框架的邊緣移動。）

來源

2012-02-02 04:20:29 Scott

這是非常接近，但文字太淺。謝謝 – Autolycus 2012-02-02 04:24:40

你可以改變'顏色：'屬性來使文本變暗......更新在這裏：http://jsfiddle.net/NotInUse/Fbpg6/21/ – Scott 2012-02-02 04:26:54

謝謝!!那做了這個工作 – Autolycus 2012-02-02 04:29:48

這更接近副本：

.test { 
border: 1px solid; 
background: #EBEBEB; 
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#EBEBEB)); 
background: -webkit-linear-gradient(top, #EBEBEB, #EBEBEB); 
background: -moz-linear-gradient(top, #EBEBEB, #EBEBEB); 
background: -ms-linear-gradient(top, #EBEBEB, #EBEBEB); 
background: -o-linear-gradient(top, #EBEBEB, #EBEBEB); 
padding: 7px 15px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
-webkit-box-shadow: #ebebeb 0 1px 0; 
-moz-box-shadow: #ebebeb 0 1px 0; 
text-shadow: white 1px 1px 0; 
color: #4D4C4D; 
font-size: 13px; 
font-family: Arial,sans-serif; 
font-weight: normal; 
text-decoration: none; 
vertical-align: middle; 
border-image: initial; 
border-color: #BBB; 
}

來源

2012-02-02 04:17:46

這梯度相匹配。你需要稍大的字體和不同的顏色來匹配PSD和瀏覽器。

.test 
{ 
    border: 1px solid #cacaca; 
    background-color: #ebebeb; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e3e3e3)); 
    background: -webkit-linear-gradient(top, #ebebeb, #ebebeb); 
    background: -moz-linear-gradient(top, #f0f0f0, #e3e3e3); 
    background: -ms-linear-gradient(top, #f0f0f0, #e3e3e3); 
    background: -o-linear-gradient(top, #f0f0f0, #e3e3e3); 
    padding: 5px 15px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    text-shadow: #fff 0 1px 1px; 
    color: #666; 
    font-size: 14px; 
    font-family: font-family: Arial,sans-serif; 
    font-weight:lighter; 
    text-decoration: none; 
    vertical-align: middle; 
}

來源

2012-02-02 04:20:57 Sajid

這個按鈕的css3

回答

相關問題