也許類似下面的(雖然你將不得不打了一下與色彩等您喜歡):
<a href="#" class="btn">Button</a>
.btn {
border: solid 1px rgb(139,137,125);
border-color: rgb(182,179,161) rgb(167,164,146) rgb(139,137,125) rgb(167,164,146);
background: #C9C6B4; /* old browsers */
background: -moz-linear-gradient(top, #D8D5C1 3%, #C9C6B4 4%, #A7A492 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #D8D5C1), color-stop(4%, #C9C6B4), color-stop(100%, #A7A492)); /* webkit */ /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D5C1', endColorstr='#A7A492',GradientType=0);*/
-moz-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-webkit-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
cursor: pointer;
font: bold 12px/1em Arial, Helvetica, sans-serif;
color: rgb(255,255,255)!important;
text-align: center;
white-space: nowrap;
float: right;
margin: 0 0 8px 5px;
padding: 0.5em 1em;
}
.btn:hover {
border-color: rgb(211,106,13) rgb(185,72,0) rgb(166,53,0) rgb(185,72,0);
-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
-moz-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
-webkit-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
background: #DD6C00; /* old browsers */
background: -moz-linear-gradient(top, #F69C11 3%, #DD6C00 4%, #BB4A00 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #F69C11), color-stop(4%, #DD6C00), color-stop(100%, #BB4A00));
}
尼克
你嘗試過什麼CSS,什麼你做結果看起來像?您發佈的按鈕圖像看起來可以通過「box-shadow」進行操作。 – freejosh
問題是,我需要顯示爲箱陰影的數據庫中有很多漸變。所以雖然這個實例可以通過試驗和錯誤盒子陰影來近似,但我需要一個更可靠的方法來做到這一點。 – Phil
這是用多個'text-shadow'完成的,但是'box-shadow'可以應用相同的技術:http://jaredhardy.com/omg-text/ – cimmanon