怎么用CSS3制作漂亮的按鈕

本篇內容主要講解“怎么用CSS3制作漂亮的按鈕”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用CSS3制作漂亮的按鈕”吧!

今天我給大家介紹一下如何使用CSS3來制作一個圓角陰影、漸變色的漂亮的按鈕，它不需要任何圖片和javascript腳本，只需要CSS3就可以輕松實現按鈕效果，并且可以適用于任意HTML元素，想p，span，p，a，button，input等等。

今天我給大家介紹一下如何使用CSS3來制作一個圓角陰影、漸變色的漂亮的按鈕，它不需要任何圖片和javascript腳本，只需要CSS3就可以輕松實現按鈕效果，并且可以適用于任意HTML元素，想p，span，p，a，button，input等等。

這些純CSS代碼制作的按鈕大小可以根據字體大小自動調整，漸變色背景可以兼容各瀏覽器，并且有正常、鼠標滑向、點擊三種狀態樣式，當然，如果您的瀏覽器不支持CSS3，那么按鈕將沒有圓角和陰影效果。

CSS3特性

首先我們熟悉下CSS3是如何實現圓角和陰影效果的。

CSS3提供了新的屬性如：陰影text-shadow，box-shadow，和圓角border-radius，我們先來看這樣一段CSS3代碼：

text-shadow: 0 1px 1px rgba(0,0,0,.3); box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

以上代碼第一行設置了文字的陰影效果，它的用法結構：X軸偏移量，Y軸偏移量，模糊量，顏色，對于顏色可以使用RGBA模式。

第二行代碼設置了邊框盒子陰影效果，用法與文字陰影效果一樣。

第三行和第四行分別表示在不同瀏覽器內核下的CSS3用法，-webkit-xxx表示webkit內核，-moz-xxx表示firefox內核。

border-radius用來設置圓角樣式，同樣有webkit和firefox之分。

border-radius: .5em; -webkit-border-radius: .5em; /* for Webkit */ -moz-border-radius: .5em;  /* for Firefox */

那么如何用CSS3處理漸變色的跨瀏覽器兼容的問題呢？在css2時代，我們通常會準備一張制作好的漸變背景圖片，然后通過background-color來加載背景圖片，從而實現背景色漸變效果。而CSS3，只需要區分不同瀏覽器內核下使用顏色來完成漸變效果。

background: #0095cd; /* for Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); /* for Firefox */ background: -moz-linear-gradient(top,  #00adee,  #0078a5); /* for IE */ filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

對于webkit內核瀏覽器，-webkit-gradient()，linear表示漸變類型為線性漸變，left top表示漸變開始位置X軸和Y軸，left bottom表示漸變結束位置X軸和Y軸，from(#00adee), to(#0078a5)表示漸變色從#00adee到#0078a5。

對于firefox內核瀏覽器，-moz-linear-gradient(top, #00adee, #0078a5)中linear表示漸變類型為線性漸變，top表示漸變開始位置，后面表示兩個顏色值的變化。

而對于IE內核，使用filter（濾鏡），其中startColorstr和endColorstr分別表示開始顏色和結束顏色的變化值。

介紹完上面的CSS3特性，我們現在來使用CSS3制作漂亮的按鈕效果。

如何使用

1、首先你可以復制DEMO中的CSS代碼。

2、在html頁面中加入如下代碼：

<a href="#" class="button green">億速云服務器香港代購</a>

3、您將會得到以下按鈕效果：

億速云服務器香港代購

到此，相信大家對“怎么用CSS3制作漂亮的按鈕”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！