如何使用CSS創建這些按鈕？

enter image description here

2013-07-14 Salma Akter

你嘗試過這麼遠嗎？這些按鈕沒有什麼特別的，邊框半徑，一些插入框陰影和邊框 –

嘗試[css3button]（http://css3button.net/）。 – Vucko

@koala_dev，我創建了，但它不能。 –

我嘗試：

.myButton{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    color: #ffffff; 
    padding: 14px 40px; 
    background: -moz-linear-gradient(
     top,#6CA44B 0%,#4D872B); 
    background: -webkit-gradient(
     linear, left top, left bottom, 
     from(#6CA44B), 
     to(#4D872B)); 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border-radius: 25px; 
    border: 1px solid; 
    border-top-color:#7B8E70; 
    border-right-color: #536B44; 
    border-left-color: #536B44; 
    border-bottom-color: #4B643D; 
    box-shadow: 0 0 0 5px #e5e5e5,inset 0 1px rgba(255,255,255,0.3); 
    text-shadow: 0 1px rgba(0,0,0,0.5); 
} 

.myButton:hover{ 
    background: #40781F; 
    box-shadow: 0 0 0 5px #e5e5e5,inset 0 2px rgba(0,0,0,0.3); 
    color: rgba(255,255,255,0.9); 
}

Demo here

來源

2013-07-14 20:48:21

什麼是「愚蠢的瀏覽」IE8的代碼 –

你將有一個radius:Xpx propertie適用於你想一個按鈕background-color，border:3px solid (color here)沿項目。

來源

2013-07-14 20:06:30

你可能是指'border-radius'而不是簡單的'radius'。 – icktoofay

我的不好，就是我的意思。 – 2013-07-14 20:12:07

隨後編輯您的帖子。 – icktoofay

的Html

<button type="button" class="cssButton">Salma</button>

的CSS：

cssButton { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #ffffff; 
    padding: 10px 20px; 
    background: -moz-linear-gradient(
     top, 
     #dbffe0 0%, 
     #2e9e44); 
    background: -webkit-gradient(
     linear, left top, left bottom, 
     from(#dbffe0), 
     to(#2e9e44)); 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    border-radius: 20px; 
    border: 2px solid #adadad; 
}

來源

2013-07-14 20:07:32

您需要添加漸變和邊境raduius

DEMO http://jsfiddle.net/kevinPHPkevin/SXxz7/1/

.button { 
    -moz-box-shadow:inset 0px 1px 0px 0px #7af013; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #7af013; 
    box-shadow:inset 0px 1px 0px 0px #7af013; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811)); 
    background:-moz-linear-gradient(center top, #77d42a 5%, #5cb811 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811'); 
    background-color:#77d42a; 
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    border-radius:20px; 
    border:3px solid #268a16; 
    display:inline-block; 
    color:#ffffff; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:13px 22px; 
    text-decoration:none; 
}.classname:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a)); 
    background:-moz-linear-gradient(center top, #5cb811 5%, #77d42a 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a'); 
    background-color:#5cb811; 
}.classname:active { 
    position:relative; 
    top:1px; 
}

來源

2013-07-14 20:10:38 Vector

如何使用CSS創建這些按鈕？

回答

相關問題