我可以使用純CSS（按鈕）製作此樣式

1

您可以使用下面的CSS和HTML在你的崗位上實現的東西按鈕

CSS

#button { 
    background-color: #7BCEE6; 
    background-image: -moz-linear-gradient(top, #7BCEE6, #3F7DBB); /* FF3.6 */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7BCEE6), color-stop(1, #3F7DBB)); /* Saf4+, Chrome */ 
    background-image: linear-gradient(top, #7BCEE6, #3F7DBB); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7BCEE6', EndColorStr='#3F7DBB'); /* IE6–IE9 */ 
    width:120px; 
    height:40px; 
    -moz-border-radius: 12px; /* FF1+ */ 
    -webkit-border-radius: 12px; /* Saf3-4 */ 
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome */ 
} 
#image { 
    width:25px; 
    height:40px; 
    background:#930; 
    margin-left:10px; 
    float:left; 
} 
#text { 
    text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */ 
    color:#fff; 
    font-size:22px; 
    float:left; 
    margin-top:5px; 
}

HTML

<div id="button"> 
    <div id="image"></div> 
    <div id="text">Reports</div> 
</div>

活生生的例子：http://jsbin.com/ebuno5

筆記哪裏是紅色塊，應該是你可以添加一個PNG圖像。此外，你必須記住，大多數Internet Explorer 8下的css3不受支持。要添加一些CSS3功能，即你可以在你的pie.htc

來源

2011-01-07 20:59:26 Sotiris

1

我最近看到這些例子：

http://lab.simurai.com/css/buttons/

這些使用了大量前沿的CSS所以測試徹底...

來源

2011-01-07 20:37:04

+0

+1對於真棒鏈接 – qwertymk 2011-01-07 20:41:51

1

退房：http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

來源

2011-01-07 20:38:37 PeeHaa

0

是的，我使用http://gradients.glrzad.com/來生成這個CSS：

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.45, rgb(26,106,163)), 
    color-stop(0.87, rgb(36,183,224)) 
); 

background-image: -moz-linear-gradient(
    center bottom, 
    rgb(26,106,163) 45%, 
    rgb(36,183,224) 87% 
);

但是請注意（因爲我確信你是），這在Internet Explorer中不起作用。

此外，你必須檢查出克里斯Coyier的CSS3 button maker。

來源

2011-01-07 20:38:48

+0

IE具有梯度太大，隊友：`過濾器：進程id：DXImageTransform.Microsoft.gradient（startColorstr = '＃24B7E0'，endColorstr =」＃1A6AA3'，GradientType = 0）;` – mingos 2011-01-07 20:42:46

1

你需要CSS3。儘管如此，它在所有瀏覽器中都不受支持。檢查http://css3generator.com/以生成您的漸變。它會將您發送給一個非常棒的漸變編輯器：http://www.colorzilla.com/gradient-editor/。下面一個例子來創建漸變與舊版瀏覽器的一些支持：

/* old browsers */ 
background: #1E5799; 
/* firefox */ 
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); 
/* webkit */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); 
/* ie */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0);

您還可以使用CSS3 PIE添加爲Internet Explorer CSS3支持：http://css3pie.com/。祝你好運！

來源

2011-01-07 20:40:40 RobinBrouwer

0

我使用this site作爲漸變。

請注意，Opera（目前在版本11）根本不支持CSS3漸變，所以請確保它具有某種後備狀態。

來源

2011-01-07 20:47:23 mingos

0

看一看CSS Pie。它提供了跨瀏覽器的邊界半徑，箱陰影和漸變功能

來源

2011-01-07 20:48:32 iBiryukov