css按鈕漸層色

CSS3漸層特性的應用。可以去看一組按鈕，我只用了 CSS建立完成的漸層按鈕(不需要圖片和Javascript)。 這些按鈕可以根據字型的大小伸縮。當填充和字型大小發生變化時，這些按鈕的大小可以容易地適應。 這種方法最好的部分就是能被應用於任何HTML元素，比如 p, span, p, a, button, input, 等等。

為什麼這些按鈕如此的酷?

純 CSS: 沒有圖片和Javascript的應用。

漸層可以跨瀏覽器應用 (IE, Firefox 3.6, Chrome, and Safari).

靈活和可擴充: 通過改變字型大小和填儲值,按鈕的大小和圓角可以調整。

它有三個按鈕狀態: normal, hover 和 active。

能被應用於任何HTML元素，比如a, input, button, span, p, p, h3, 等等。

備忘：如果CSS3不被支援，它將會顯示成普通按鈕 (沒有漸層和陰影)。

預覽

下面的圖片展示的是不同的瀏覽器的不同的顯示效果。

按鈕的幾個狀態

正常狀態 = 漸層並帶有加粗和陰影製作效果。

懸停 = 更深的漸層

啟用 = 反向漸層, 向下1px, 同時有更深的字型。

按鈕的一般樣式

下面的代碼是類.button 的一般樣式。 為了基於字型大小變化而能自由伸縮，我在填充(padding)和邊界半徑border-radius時用了em值。要調整圓角和按鈕的大小，簡單地改變邊界半徑，字型大小和填儲值。 比如：我可以通過減小字型大小(font-size)和填儲值(padding values)做一個更小的按鈕.

.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}.button:hover {text-decoration: none;}.button:active {position: relative;top: 1px;}

色彩的一般樣式

下面的代碼是橘黃色的css樣式。 第一行的background 是一個備用，針對不支援CSS3 的瀏覽器, 第二行的background是為 Webkit這類瀏覽器, 第三行的background是為Firefox,最後一行是filter只被Internet Explorer識別。

.orange {color: #fef4e9;border: solid 1px #da7c0c;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top,  #faa51a,  #f47a20);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}.orange:hover {background: #f47c20;background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background: -moz-linear-gradient(top,  #f88e11,  #f06015);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');}.orange:active {color: #fcd3a5;background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background: -moz-linear-gradient(top,  #f47a20,  #faa51a);filter:  progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}

如何使用我的按鈕?

比如你喜歡藍色的按鈕，並想應用在你的頁面:

首先, 複製 .button 和 .blue 的CSS.

然後, 增加到你想要成為按鈕的 HTML 元素 (比如 <a href="#">Button</a>)，如。 CSS 能被應用於 link, p, span, p, input, button, 等元素。

相關文章：

HTML5 Canvas：繪製漸層色

div+css背景漸層色程式碼範例

css漸層色彩 省略標記 嵌入字型 文本陰影的詳細介紹

