CSS按鈕的制作方法系列文章

1、CSS按鈕的制作方法系列文章_按鈕與鏈接本文是CSS按鈕的制作方法系列文章第一部分：按鈕與鏈接。在上篇文章中我曾提到過一點(diǎn)，按鈕在網(wǎng)頁中最常用的作用是提交表單，以及作為一個動作的開始按鈕，有的時候可以作為頁面中著重突出的內(nèi)容?！疤峤槐韱巍边@個很容易理解，無非是在一個表單的最后添加上“提交”、“重填”這樣的按鈕，比如注冊會員表單、調(diào)查表等。“動作的開始按鈕”即一個或一系列動作的開始按鈕，其實(shí)提交表單也屬于這種作用之一，只是作為動作的開始按鈕可以運(yùn)用的更靈活，比如淘寶商鋪購買頁面的“立即購買”和“加入購物車”按鈕，如上圖中所示，它是開啟下一個動作的按鈕，也可以說是提交購買數(shù)量的表單提交按鈕。而圖中

2、的“在線申請”和“點(diǎn)擊閱讀”按鈕則僅僅是一個動作開始按鈕。有人會問，“著重突出的內(nèi)容”和開始按鈕不是一樣的嗎？其實(shí)在表面意義上是相同的，但在其“內(nèi)在”有著本質(zhì)的不同，“內(nèi)在”其實(shí)就是“源代碼”。有時候著重突出的內(nèi)容雖然在設(shè)計(jì)時做的像個按鈕，但在制作頁面時卻是用鏈接標(biāo)簽制作成一個鏈接。為什么要這樣做？第一，為了CSS語義的正確性，因?yàn)轫撁嬷兄赝怀龅膬?nèi)容本身不是按鈕，只是做成了按鈕的樣子而已；第二，為了SEO優(yōu)化，如果一個頁面中突出的內(nèi)容制作成一個按鈕，為了讓其打開后面的頁面，必須寫一段Javascript，讓其有點(diǎn)擊觸發(fā)的效果，但搜索引擎的搜索爬蟲不能由此按鈕爬到更深一步的頁面。而如果將其做成

3、一個鏈接，爬蟲會順理成章地從該鏈接搜索到下一個頁面，從而保持網(wǎng)站被搜索引擎抓取的縱深和連續(xù)性。所以，形式雖然都是按鈕，卻存在著幾種細(xì)微的差別，不知道通過上面的講解，您對它們是否有了一定的了解？不理解也沒關(guān)系，以后慢慢體會、慢慢消化。如果對此已爛熟于胸，那就即刻進(jìn)入第二部分三種按鈕形式，以及它們的優(yōu)缺點(diǎn)。CSS按鈕制作方法系列文章_按鈕形式及優(yōu)缺點(diǎn)本文是CSS按鈕的制作方法系列文章第二部分：三種按鈕形式，以及它們的優(yōu)缺點(diǎn)。在上篇文章中，我提到了按鈕的三種作用和兩種制作方法。三種作用分別是：提交表單、動作開始按鈕和著重突出；兩種制作方法是：制作成按鈕和制作成鏈接。有些朋友會出現(xiàn)疑問，上篇文章中明明

4、寫的是兩種制作方法，為什么這篇文章又說是三種按鈕形式及優(yōu)缺點(diǎn)呢？因?yàn)閺闹谱鞣矫嬷v，按鈕除了前面文章中提到的input和鏈接標(biāo)簽，還有一種制作方法：button。input和button都可以制作按鈕，它們制作按鈕的代碼分別是： 和 在線申請以“/”作為結(jié)尾，利用type定義類型，讓其變?yōu)榘粹o、復(fù)選框、單選框等等，而當(dāng)其是提交按鈕時type類型為submit，可見其著重體現(xiàn)“提交”這個意義。以結(jié)尾，相比input而言，提供了更為強(qiáng)大的功能和更豐富的內(nèi)容。與 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容，比如文本或多媒體內(nèi)容。例如，我們可以在按鈕中包括一個圖像和相關(guān)的文本，用它們

5、在按鈕中創(chuàng)建一個吸引人的標(biāo)記圖像，比如這樣寫：在線申請 在線申請 需要注意的是，請始終為按鈕規(guī)定 type 屬性。Internet Explorer 的默認(rèn)類型是 button，而其他瀏覽器中（包括 W3C 規(guī)范）的默認(rèn)值是 submit。雖然所有瀏覽器都支持標(biāo)簽，但如果在 Html 表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 與 之間的文本，而其他瀏覽器將提交 value 屬性的內(nèi)容。以上就是按鈕的兩種制作方法，我們可以當(dāng)做按鈕的兩種形式。第三種形式就是上篇文章中說到的鏈接標(biāo)簽制作方法。這三種方法都可以將Html中的元素做成按鈕樣式

6、，如上圖中所示。至于具體的制作方法嘛，我將在下篇文章中詳細(xì)講解。如有興趣請點(diǎn)擊第三部分三種按鈕的制作方法繼續(xù)閱讀。CSS按鈕制作方法系列_三種按鈕的制作方法CSS按鈕制作方法系列_三種按鈕的制作方法 來源：黃超點(diǎn)擊放大 本文是CSS按鈕的制作方法系列文章第三部分：三種按鈕的制作方法。在上篇文章中，我提到了三種按鈕，它們是用和html代碼input制作的按鈕、用button制作的按鈕和用鏈接標(biāo)簽制作的按鈕。本篇文章將講解三種按鈕的制作方法。其實(shí)按鈕的制作并不難，在前面的文章中我也曾提到過，可以參閱用CSS制作個性化按鈕這篇文章。這篇文章中只提到了用input制作按鈕，但這次文章中還涉及了butt

7、on和a的用法，所以會進(jìn)行更全面的介紹。先請看上面圖中所示，最左側(cè)的一排是沒有用CSS修飾的源代碼input、button、a預(yù)覽時的原始樣式，要想讓它們成為最右側(cè)的按鈕樣式必須經(jīng)過CSS修飾才可以。下面就開始制作步驟。在圖中從上至下的Html代碼是： 在線申請 點(diǎn)擊閱讀 將上面的代碼復(fù)制到網(wǎng)頁源代碼中，在瀏覽器中預(yù)覽一下，效果應(yīng)該如上圖中所示。下面就開始利用CSS對按鈕進(jìn)行修飾。CSS代碼如下： 經(jīng)過上面的CSS修飾，三個按鈕就會變成上圖最右邊那排按鈕的樣式，但要注意CSS中的背景圖片路徑。到這里，三種按鈕的簡單制作方法就算完成了，如果想為按鈕的效果升級或?qū)W習(xí)更高級的制作方法請繼續(xù)關(guān)注下篇文

8、章第四部分：按鈕的高級制作方法，增強(qiáng)特效的方法等。CSS按鈕的制作方法系列文章-按鈕特效css按鈕特效 來源：黃超點(diǎn)擊放大 本文是CSS按鈕的制作方法系列文章第四部分：按鈕的高級制作方法，增強(qiáng)特效等。在上篇文章中，講解了三種按鈕的制作方法，三者最終完成效果相同。為了優(yōu)化增強(qiáng)網(wǎng)站與用戶的交互體驗(yàn)，給網(wǎng)頁中的按鈕加上一些特效是非常友好的選擇，比如一些突出的修飾效果、翻轉(zhuǎn)效果等。一提到翻轉(zhuǎn)效果，自然會聯(lián)想起鼠標(biāo)懸浮狀態(tài)和點(diǎn)擊后狀態(tài)。在input、button、a三種按鈕的制作方法中，鼠標(biāo)懸浮時翻轉(zhuǎn)效果制作起來都不難，但最簡單的還要屬標(biāo)簽，因?yàn)樗鼉H用:hover、:active兩個偽類就可以完成效果制

9、作。雖然input和button也可以用:hover和:active偽類定義，但二者的效果僅被一些現(xiàn)代瀏覽器支持，諸如IE7以上版本、Firefox、Opera、Chrome等等，如果非要讓input和button在IE6等瀏覽器中也具有懸浮時的翻轉(zhuǎn)效果也不是沒有辦法，那就需要用到一小段Javascript代碼，這里暫且不討論。一、鼠標(biāo)懸浮時的翻轉(zhuǎn)效果 CSS代碼如下：a:hover,button:hover,input:hover background:url(btnbg2.gif); 這里僅列出了鼠標(biāo)懸浮時狀態(tài)的CSS代碼，其余按鈕Html、CSS代碼請參閱上篇文章三種按鈕的制作方法，bt

10、nbg2.gif要事先準(zhǔn)備好，即為上圖中鼠標(biāo)懸浮時狀態(tài)背景圖。既然有了鼠標(biāo)懸浮狀態(tài)的效果，那就再添加一個鼠標(biāo)點(diǎn)擊后的效果：a:visited background:url(btnbg3.gif); 需要注意的是，按照偽類LoVe-HAte的原則，這段CSS要添加在偽類:hover的前面，即：a:visited background:url(btnbg3.gif); a:hover,button:hover,input:hover background:url(btnbg2.gif); 二、修飾圖片在按鈕上添加一些修飾圖片也可以起到突出按鈕的作用，比如上圖中最下面的按鈕，上面多了一個綠色的小對勾

11、，在無形間多少勾起了用戶的點(diǎn)擊欲望。使用input和a標(biāo)簽制作方法，這個效果只需要使用背景圖就能搞定，但使用button方法制作則更為簡單，只需要準(zhǔn)備一張小小的透明對勾圖片，然后將圖片插入到Html代碼的與之間即可，比如： 在線申請 三、滑動門效果利用滑動門效果，可以讓按鈕的長度根據(jù)按鈕中的文字長度自動伸展，具體制作方法可以參考滑動門效果及其制作方法這篇文章。到這里，幾種按鈕的特效部分就算完成了，如果想在制作方面和顯示效果方面有更多提高，請繼續(xù)關(guān)注下篇文章第五部分：其它按鈕特效及制作方法。CSS按鈕的制作方法系列文章-其它按鈕特效css3圓角按鈕 來源：smashingmagzine點(diǎn)擊放大

12、本文是CSS按鈕的制作方法系列文章第五部分：其它按鈕特效以及制作方法等。在前面的文章中，已經(jīng)講了按鈕和鏈接的主要區(qū)別，不同的作用以及不同的制作費(fèi)方法等。本文將向您介紹一些按鈕的特殊效果及制作方法。為了追求比較好的顯示效果和精簡的結(jié)構(gòu)源代碼，許多制作者會采用一些以前系列文章中沒有用到的方法，比如CSS3和CSS Sprite。CSS3在按鈕制作中的應(yīng)用windows默認(rèn)瀏覽器中的按鈕幾乎都是直角形狀的，如果欲將網(wǎng)頁中的按鈕做成圓角，原來只能靠背景圖來完成，但現(xiàn)在或者不久的將來就可以使用CSS3來完成了。如上圖中所示，方法1中可以使用背景圖和邊框可以定義按鈕的樣式；方法2中使用Firefox和we

13、bkit核心瀏覽器的特有CSS樣式也可定義按鈕樣式，這個方法和CSS3相同，目前只有少量瀏覽器支持，但以后應(yīng)該可以廣泛應(yīng)用，示例：input,button border-radius:50px 25px; 具體方法可查看這篇文章CSS3新體驗(yàn)之一_圓角效果。css sprite 背景圖 來源：黃超點(diǎn)擊放大CSS Sprite在按鈕制作中的應(yīng)用上篇文章中已經(jīng)給（鏈接）按鈕加上了鼠標(biāo)懸浮狀態(tài)和點(diǎn)擊后狀態(tài)，但有時候鼠標(biāo)懸浮在按鈕上時背景會發(fā)生閃爍現(xiàn)象，這是由于鼠標(biāo)觸發(fā)翻轉(zhuǎn)效果時頁面需要立即讀取CSS中的背景圖片，造成短暫的空白間隙。使用一張同時包含按鈕的默認(rèn)狀態(tài)、鼠標(biāo)懸浮狀態(tài)和點(diǎn)擊過后狀態(tài)的背景圖片

14、，利用CSS背景屬性進(jìn)行定義，可以有效解決這個問題，這就是CSS Sprite技術(shù)。使用CSS Sprite技術(shù)，重要的就是CSS背景屬性和背景圖片的準(zhǔn)確使用，首先將圖片制作好，如上圖所示。然后在CSS中定義：a background:#FFF url(buttons.gif) 0px 0px no-repeat; a:hover background-position:-42px 0px; /*經(jīng)過時的背景位置*/ a:active background-position:-84px 0px; /*點(diǎn)擊后的背景位置*/ 經(jīng)過使用CSS Sprite這么簡單的幾步定義，既解決了背景閃爍的問題，

15、又減少了用戶瀏覽對服務(wù)器的請求數(shù)量，可謂一舉兩得。詳細(xì)的CSS Sprite技術(shù)文章請參考什么是CSS Sprite?；瑒娱T效果及其制作方法網(wǎng)站承諾：阿邦網(wǎng)堅(jiān)持寫作客觀獨(dú)立的立場，永遠(yuǎn)不受金錢影響。秉承為人民生活服務(wù)的宗旨，與您分享特邀幫手的經(jīng)驗(yàn)和知識，幫您解決生活問題，提高生活品質(zhì)。本文系阿邦網(wǎng)獨(dú)家稿件，未經(jīng)許可，任何媒體和個人，不得全部或部分轉(zhuǎn)載，違者必究。 css滑動門效果示意圖 來源：smashingmagzine點(diǎn)擊放大 滑動門大家都聽說過，就是那種帶有軌道的可以左右推拉的門。而網(wǎng)頁制作范疇中的滑動門效果指的又是什么呢？ 網(wǎng)頁制作范疇中的滑動門效果是個舶來品，最早出現(xiàn)在國外的制作圈，

16、英文全稱為：Sliding Doors。 它主要用在制作可伸展的按鈕或tab標(biāo)簽時，它和生活中的滑動門相似之處在于按鈕或tab標(biāo)簽的背景圖可根據(jù)元素中文本字?jǐn)?shù)的多少自動延伸，如上圖中所示，即右側(cè)的圖片可以根據(jù)文字?jǐn)?shù)量的增多一直向右滑動。css滑動門背景圖 來源：黃超點(diǎn)擊放大 知道了原理，制作起來就輕松的多，下面我介紹一下滑動門效果的制作方法。 如果在按鈕中使用滑動門效果，那么按鈕的制作方法必須使用標(biāo)簽，因?yàn)閕nput中不能再加入可以添加背景其它標(biāo)簽，button中也沒有合適的標(biāo)簽可以使用。詳細(xì)理由可以參閱這篇文章，這里不再贅述。 使用標(biāo)簽制作的話，Html應(yīng)如下： 滑動門按鈕文字 CSS代碼如下： a background:url(button_right.gif) no-repeat top right; display: block; float: left; padding-right:10px; height:33px; line-height:33px; a span background: url(button_left.gif) no-repeat; display: block; padding-left:10px; height:33px; line-height:33px; 在制作滑動門效果前，先準(zhǔn)備兩