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

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

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

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

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

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

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

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

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

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

10、nbg2.gif要事先準(zhǔn)備好，即為上圖中鼠標(biāo)懸浮時(shí)狀態(tài)背景圖。既然有了鼠標(biāo)懸浮狀態(tài)的效果，那就再添加一個(gè)鼠標(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); 二、修飾圖片在按鈕上添加一些修飾圖片也可以起到突出按鈕的作用，比如上圖中最下面的按鈕，上面多了一個(gè)綠色的小對(duì)勾

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

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

13、bkit核心瀏覽器的特有CSS樣式也可定義按鈕樣式，這個(gè)方法和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)，但有時(shí)候鼠標(biāo)懸浮在按鈕上時(shí)背景會(huì)發(fā)生閃爍現(xiàn)象，這是由于鼠標(biāo)觸發(fā)翻轉(zhuǎn)效果時(shí)頁(yè)面需要立即讀取CSS中的背景圖片，造成短暫的空白間隙。使用一張同時(shí)包含按鈕的默認(rèn)狀態(tài)、鼠標(biāo)懸浮狀態(tài)和點(diǎn)擊過后狀態(tài)的背景圖片

14、，利用CSS背景屬性進(jìn)行定義，可以有效解決這個(gè)問題，這就是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)過時(shí)的背景位置*/ a:active background-position:-84px 0px; /*點(diǎn)擊后的背景位置*/ 經(jīng)過使用CSS Sprite這么簡(jiǎn)單的幾步定義，既解決了背景閃爍的問題，

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

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