文介紹了網(wǎng)頁(yè)編程中的按鈕使用方法。按鈕是網(wǎng)頁(yè)中最常用的控件之一，點(diǎn)擊后會(huì)觸發(fā)某些程序。即使沒(méi)有學(xué)習(xí)過(guò)編程，大家也應(yīng)該知道按鈕的概念。按鈕的最大功能是點(diǎn)擊后觸發(fā)程序。這篇文章主要介紹了如何在網(wǎng)頁(yè)中插入按鈕，并講解了按鈕的屬性和使用方法。

先來(lái)看看今天的實(shí)例效果。頁(yè)面被分為三部分：按鈕、按鈕和按鈕的共有屬性。

首先是普通按鈕，點(diǎn)擊后文本框的內(nèi)容發(fā)生了變化，但頁(yè)面并沒(méi)有刷新。接著是重置按鈕，點(diǎn)擊后文本框的內(nèi)容恢復(fù)到初始狀態(tài)，但頁(yè)面仍然沒(méi)有刷新。提交按鈕點(diǎn)擊后，頁(yè)面重新加載，提交了表單中的內(nèi)容。

接著是按鈕，點(diǎn)擊后文本框的內(nèi)容發(fā)生了變化，但頁(yè)面沒(méi)有刷新。按鈕包含一個(gè)圖片且為灰色狀態(tài)，無(wú)法點(diǎn)擊。

現(xiàn)在來(lái)看看實(shí)現(xiàn)的代碼。

輸入和按鈕的寫(xiě)法非常相似，這里只展示了最基本的寫(xiě)法。對(duì)于初學(xué)者來(lái)說(shuō)，看一眼就明白了。

按鈕有三個(gè)類(lèi)型：普通、重置和提交。按鈕的名稱(chēng)和值會(huì)提交到服務(wù)器端。

提交時(shí)提交的是按鈕的值。ID和name是控制按鈕的命名。

點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)onclick事件。autofocus屬性會(huì)在頁(yè)面加載完成后自動(dòng)獲取焦點(diǎn)。

disabled屬性可以設(shè)置按鈕是否可用，不設(shè)置時(shí)默認(rèn)可用。

form屬性用于設(shè)置提交到哪個(gè)URL、是否繞過(guò)驗(yàn)證、以及表單的相關(guān)設(shè)置。

相關(guān)屬性的優(yōu)先級(jí)高于在表單中設(shè)置的屬性。

以上就是今天的分享內(nèi)容，希望對(duì)大家有所幫助。import和button在網(wǎng)頁(yè)中插入按鈕的功能是相同的，兩者的外觀也沒(méi)有明顯的區(qū)別，但是它們的屬性設(shè)置卻存在一定的重疊。

為什么需要這兩個(gè)標(biāo)簽?zāi)兀慷⒗锇桶蜆?biāo)簽是HTML 5中新增加的標(biāo)簽，它的必要性體現(xiàn)在哪里呢？同學(xué)們要注意，阿里巴巴標(biāo)簽不是input，它不是一個(gè)封閉的標(biāo)簽，而是一個(gè)唯一的標(biāo)簽，可以包含文字或其他標(biāo)簽。

例如，可以使用阿里巴巴標(biāo)簽來(lái)插入圖片。注意，由于用戶使用的瀏覽器不同，底層的type值是必須填寫(xiě)的，絕對(duì)不能使用默認(rèn)值。

今天的分享就到這里，希望各位同學(xué)能夠認(rèn)真練習(xí)，做到不看視頻也能夠正確地寫(xiě)出代碼。所有的案例和相關(guān)文檔都可以向我索取，下期再見(jiàn)，想學(xué)編程就關(guān)注我吧。

文介紹了按鈕設(shè)計(jì)的7個(gè)基本原則，包括：強(qiáng)化按鈕、凸顯按鈕位置、凸顯重要按鈕、把按鈕按照合理的順序放好、給按鈕匹配釋義標(biāo)簽、如果用戶不想做任何操作，不安排按鈕、弱化消極按鈕。

此次的研究沒(méi)有什么革命性的創(chuàng)造。

其實(shí)自從HTML4以來(lái)，按鈕的創(chuàng)建并不是特別困難；盡管如此，還是很容易在各類(lèi)產(chǎn)品中找到一些體驗(yàn)不好的按鈕設(shè)置，所以我們?cè)诒緦?zhuān)欄中展開(kāi)了深入研究。

一、強(qiáng)化按鈕

如圖1：強(qiáng)化按鈕邊緣或在按鈕下方添加陰影使得按鈕在視覺(jué)效果上更加強(qiáng)化，讓得按鈕從背景上分離開(kāi)；而且看起來(lái)可以吸引人去點(diǎn)擊（可以想象下物理按鈕是如何吸引用戶去點(diǎn)擊的）。

如圖2：如果單詞周?chē)鷽](méi)有形狀和陰影包裹，那么沒(méi)有辦法感知其是一個(gè)按鈕；而且一個(gè)單詞是沒(méi)有辦法給予足夠的視覺(jué)提示，吸引用戶做點(diǎn)擊操作的；

如圖3：如果你把一個(gè)按鈕設(shè)計(jì)的過(guò)大，那看起來(lái)就不再是一個(gè)按鈕的樣子了。圖中的四個(gè)按鈕，一個(gè)主按鈕和三個(gè)輔助按鈕，但是主按鈕太大了，看起來(lái)不再像一個(gè)按鈕。

圖3中的的按鈕過(guò)大，這樣的交互方式需要調(diào)整。那么在圖4中可見(jiàn)我們把按鈕調(diào)小的結(jié)果，這樣的展現(xiàn)方式，使得用戶很容易分辨出主要按鈕和輔助按鈕。

盡管在我看來(lái)：按鈕還是得保持該有的按鈕的基本屬性。

但我們也知道許多網(wǎng)站設(shè)計(jì)師會(huì)擔(dān)心一個(gè)凌亂的舊的按鈕會(huì)破壞他們整體設(shè)計(jì)的格調(diào)。

當(dāng)然，他們可能是對(duì)的：我們希望主操作按鈕設(shè)計(jì)得很棒，同時(shí)也包含基礎(chǔ)的按鈕屬性；而對(duì)于用戶來(lái)說(shuō)，這是一個(gè)最重要的地方，所以我們需要讓用戶感知到帶有按鈕屬性的視覺(jué)愉悅。

二、凸顯按鈕位置

用戶體驗(yàn)中爭(zhēng)論最激烈的問(wèn)題之一是：“確定按鈕是在取消按鈕的左側(cè)或是右側(cè)？”。

這邊還有一個(gè)關(guān)于按鈕組合同樣激烈的爭(zhēng)論，例如研究上一個(gè)和下一個(gè)按鈕的組合設(shè)計(jì)。你可以在很多地方找到這樣的爭(zhēng)論，而且觀點(diǎn)往往不一。

在我的從業(yè)經(jīng)驗(yàn)中我還沒(méi)有設(shè)計(jì)過(guò)只包含有確認(rèn)和取消兩個(gè)按鈕組合的對(duì)話框或彈窗。同時(shí)我也沒(méi)有在哪個(gè)地方看到過(guò)只包含有上一步和下一步兩個(gè)按鈕的頁(yè)面。在一個(gè)網(wǎng)頁(yè)中，總會(huì)包含有其他的元素，比如文本、圖像或者其他元素。

在用戶去找最重要的操作按鈕前，他們?cè)诳词裁矗渴鞘裁磩?dòng)機(jī)觸發(fā)他們執(zhí)行取消或退回的操作？

一般來(lái)說(shuō)，在一個(gè)網(wǎng)頁(yè)上，設(shè)計(jì)師會(huì)安排特定的內(nèi)容去吸引了用戶的注意力并觸發(fā)他們采取操作。你必須使用文本或圖像去引導(dǎo)用戶進(jìn)行操作，并將相應(yīng)的按鈕放在那里。

在表單中，用戶只需選擇或單擊某個(gè)區(qū)域，因此請(qǐng)將主操作按鈕“下一步”、“確定”或“發(fā)送”放置在靠近表單上最后一個(gè)字段的左端。

所以你要問(wèn)我原因是什么，圖6我們能看到隱藏在各種奇怪地方的按鈕？

下一步按鈕隱藏在頁(yè)腳中，還有一個(gè)下一步按鈕隱藏在頁(yè)面的橫幅上，靠近標(biāo)志的地方。

三、凸顯重要按鈕

在現(xiàn)有的產(chǎn)品中我們經(jīng)常看到界面上羅列了一堆相似的按鈕讓用戶去從中挑選，這個(gè)過(guò)程相當(dāng)有難度，需要耗費(fèi)用戶的認(rèn)知成本。

為什么不給用戶一點(diǎn)提示，讓主按鈕更加突出？

把它變大一點(diǎn)或讓它看起來(lái)更重要，創(chuàng)建一個(gè)更大的目標(biāo)供用戶單擊。

或嘗試更傳統(tǒng)的方法：用一個(gè)更亮的顏色作為主要的動(dòng)作按鈕，來(lái)讓主按鈕變得顯而易見(jiàn)。

四、把按鈕按照合理的順序放好

如果主按鈕需要放在用戶下一個(gè)查看的位置，那么其他按鈕應(yīng)該放在哪里？

顯然，你應(yīng)該把其他的按鈕藏起來(lái)，這樣用戶就不太容易發(fā)現(xiàn)它們。

雖然這是一個(gè)很好的建議，但是如果您不考慮其他設(shè)計(jì)因素而遵循它，可能會(huì)出現(xiàn)如圖9所示不正確的布局。

對(duì)于從左到右閱讀的語(yǔ)言，上一步按鈕應(yīng)該始終位于下一步按鈕的左側(cè)，所以我們給出的解決方法是重新排列字段和按鈕，如圖10所示。

另一個(gè)方法是增加頁(yè)面的左邊距并將上一個(gè)按鈕放入其中。

五、給按鈕匹配釋義標(biāo)簽

前幾天，我正焦急地試圖將演示文稿上載到Dropbox帳戶。

彈出了如圖11所示的消息：它給了我一個(gè)標(biāo)簽按鈕“Awesome”！

• 那是什么意思？
• 按鈕應(yīng)該怎么用？
• 我怎樣才能實(shí)現(xiàn)我的目標(biāo)，讓文件存到我需要的存放的地方？

這種交互方式違背了最佳體驗(yàn)設(shè)計(jì)原則：給按鈕安置釋義標(biāo)簽。

相信我們中的大多數(shù)人都經(jīng)歷過(guò)類(lèi)似的這些不受歡迎的消息類(lèi)彈框，它們告訴我們一些嚴(yán)重和可怕的錯(cuò)誤，并希望我們單擊確認(rèn)。

這種體驗(yàn)不好，我不想在收到這樣的壞消息后再單擊“確定”，我們當(dāng)然不能保證用戶會(huì)看到按鈕上的標(biāo)簽。

在我的演示中，我提到了三項(xiàng)研究，它們表明：

• 如果你在告警提示時(shí)放置了錯(cuò)誤的按鈕，一些用戶不會(huì)閱讀按鈕的標(biāo)簽，而是會(huì)單擊按鈕；
• 一些用戶則會(huì)閱讀這些標(biāo)簽，因此可以通過(guò)編寫(xiě)每個(gè)按鈕釋義標(biāo)簽來(lái)幫助用戶快速理解；
• 如果你發(fā)現(xiàn)自己陷入了一個(gè)爭(zhēng)論中，比如說(shuō)，取消操作應(yīng)該在一個(gè)對(duì)話框中，記住你需要用它的功能性意思來(lái)標(biāo)記按鈕。

六、如果用戶不想做任何操作，不安排按鈕

我瀏覽了很多表單，想找一個(gè)合適的作為用例。

為了測(cè)試是否適用，我盡量去進(jìn)行填寫(xiě)，但我真的不想注冊(cè)一個(gè)網(wǎng)站或申請(qǐng)貸款或做其他目的的表單，所以這個(gè)時(shí)候有一個(gè)重置或取消按鈕會(huì)比較方便。

我曾經(jīng)寫(xiě)過(guò)一篇文章，題目是“重置：HTML的一部分是為我發(fā)明的。文中提及

“如果您是為從事表單設(shè)計(jì)的客戶做設(shè)計(jì)，請(qǐng)確保包含重置按鈕。如果是為別人設(shè)計(jì)的，問(wèn)問(wèn)自己，他們是否真的想清楚所有的填寫(xiě)過(guò)的內(nèi)容。”

寫(xiě)到這里的時(shí)候,我意識(shí)到很久沒(méi)在表單上看到重置按鈕了，甚至今年截止我還沒(méi)有見(jiàn)過(guò)，而且連取消按鈕也越來(lái)越少了。

我截取所有我最近遇到的表單以及我2012年的案例庫(kù)，沒(méi)有一個(gè)重置按鈕，只有大約10%的表單有取消按鈕。但是其中大約一半的表單，我覺(jué)得用戶是需要做取消的操作的。

我還看到許多按鈕只是重復(fù)相同的操作，所以用戶在填寫(xiě)表單的時(shí)候會(huì)感覺(jué)他們沒(méi)有取得任何進(jìn)展。例如，我最近開(kāi)始申請(qǐng)信用卡，如圖13顯示了前三個(gè)步的主操作按鈕，然后沒(méi)有一個(gè)步驟為我提供表單所需填寫(xiě)的表單，所以我很快就產(chǎn)生了不耐煩的情緒，以至于連一個(gè)問(wèn)題都沒(méi)填寫(xiě)完畢，我就放棄申請(qǐng)了。

當(dāng)然你可能會(huì)覺(jué)的這是個(gè)微不足道的小問(wèn)題，你是否還記得“價(jià)值3億美元的按鈕”這個(gè)研究。在流程中，用戶遇到“登錄”按鈕和“注冊(cè)”按鈕兩個(gè)選擇，但用戶要么不記得他們的登錄憑據(jù)，要么不想注冊(cè)，所以兩個(gè)都不是用戶的選擇。用戶想做的是將注冊(cè)改為繼續(xù)，從而實(shí)現(xiàn)了銷(xiāo)售額的大幅增長(zhǎng)。

七、弱化消極類(lèi)按鈕

盡管我反對(duì)放置用戶不想操作的按鈕，但是有時(shí)確實(shí)需要提供消極類(lèi)按鈕，如取消訂單。

這是我在自己案例庫(kù)中找到的看上去一個(gè)合理的“取消”按鈕，截圖來(lái)源一個(gè)網(wǎng)站，該網(wǎng)站的目標(biāo)用戶是那些即將準(zhǔn)備進(jìn)行一筆相當(dāng)大的購(gòu)買(mǎi)、每月支付長(zhǎng)期款項(xiàng)的非熟練用戶，因?yàn)檫@批用戶不知道點(diǎn)擊關(guān)閉窗口的關(guān)閉按鈕就可以取消交易。

如果您確實(shí)需要放置消極類(lèi)按鈕，那我們的建議是讓這些消極的按鈕比主操作按鈕更難找到，例如，通過(guò)使它們看起來(lái)不那么像按鈕或更小，甚至將它們變成鏈接。

如果用戶想要取消或執(zhí)行其他消極類(lèi)操作，需要先找這些按鈕，做到了與主操作按鈕的分層，使得那些樂(lè)于繼續(xù)執(zhí)行任務(wù)的用戶不會(huì)陷入可怕的錯(cuò)誤中。

八、小結(jié)

在我們的書(shū)《Forms That Work: Designing Web Forms for Usability》中，Gerry Gaffney和我將表單分為三個(gè)層次：關(guān)系、對(duì)話和外觀。

在她的書(shū)《Letting Go of the Words: Web Content That Works》中，建議我們把網(wǎng)頁(yè)看作是用戶和網(wǎng)頁(yè)的對(duì)話過(guò)程。而按鈕在人和網(wǎng)頁(yè)的對(duì)話中起著至關(guān)重要的作用。

當(dāng)用戶第一次跳轉(zhuǎn)到包含表單的頁(yè)面時(shí)，一個(gè)適當(dāng)?shù)囊子谧R(shí)別的主操作按鈕有助于展示其任務(wù)的范圍——一個(gè)短表單配一個(gè)即現(xiàn)的按鈕組合是極好的；一個(gè)長(zhǎng)表單，如果在折疊處沒(méi)配置按鈕可能就沒(méi)那么好了。當(dāng)然，這取決于關(guān)系，也就是說(shuō)，取決于用戶的目標(biāo)和提出的問(wèn)題。

點(diǎn)擊一個(gè)按鈕意味著我的回合結(jié)束，這是任何成功對(duì)話的關(guān)鍵因素。平穩(wěn)的交互可以讓談話流暢地進(jìn)行。如果出現(xiàn)一些小問(wèn)題，比如讓用戶尋找按鈕，這個(gè)會(huì)引起對(duì)話的中斷，當(dāng)然最壞的情況則是出現(xiàn)故障。

從會(huì)話的角度來(lái)看：在主操作按鈕上貼上“提交”的標(biāo)簽是否有助于提升體驗(yàn)，可能有如把“發(fā)送”和“提交”的標(biāo)簽給按鈕貼上來(lái)說(shuō)明它們的作用。

• 對(duì)于精通技術(shù)的高手，明白數(shù)據(jù)會(huì)被快速發(fā)送給處理器處理；
• 對(duì)于其他人來(lái)講，可能和ESC按鈕的釋義一樣；
• 對(duì)于少數(shù)敏感的人來(lái)說(shuō)，標(biāo)簽似乎在談話中制造一種不愉快的語(yǔ)氣，因此會(huì)中斷對(duì)話。

原文地址：https://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php

原文作者：Caroline Jarrett

編譯作者：agileyang

本文由 @agileyang 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議

實(shí)際開(kāi)發(fā)中，按鈕的應(yīng)用是必不可少。使用 CSS 來(lái)制作按鈕，可以更有新意，更有趣，也可以自定義自己想要的樣式。

一、平面樣式CSS按鈕

平面樣式按鈕的使用現(xiàn)在非常流行，并且符合無(wú)處不在的平面設(shè)計(jì)趨勢(shì)。，這些的平面樣式按鈕效果很好看。

以下代碼是按鈕處于正常的情況下的狀態(tài)。

例：

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

1. 按鈕顏色

顏色：Green ，Blue， Red， Gray ，Black。

可以使用 background-color 屬性來(lái)設(shè)置按鈕顏色。

例

.button1 {
                background-color: #4CAF50;
            }

            /* Green */
            .button2 {
                background-color: #008CBA;
            }

            /* Blue */
            .button3 {
                background-color: #f44336;
            }

            /* Red */
            .button4 {
                background-color: #FFC0CB;
                color: black;
            }

            /* Gray */
            .button5 {
                background-color: #555555;
            }

2. 按鈕大小

尺寸10px ，12px ，16px 20px ， 24px。

可以使用 font-size 屬性來(lái)設(shè)置按鈕大小:

例 ：

.button1 {
                font-size: 10px;
            }

            .button2 {
                font-size: 12px;
            }

            .button3 {
                font-size: 16px;
            }

            .button4 {
                font-size: 20px;
            }

            .button5 {
                font-size: 24px;
            }

3. 圓角按鈕

弧度：2px ，4px ，8px ，12px ，50%。

可以使用 border-radius 屬性來(lái)設(shè)置圓角按鈕:

例：

.button1 {
                border-radius: 2px;
            }

            .button2 {
                border-radius: 4px;
            }

            .button3 {
                border-radius: 8px;
            }

            .button4 {
                border-radius: 12px;
            }

            .button5 {
                border-radius: 50%;
            }

二、邊框樣式CSS按鈕

邊框樣式按鈕與平面按鈕屬于同一類(lèi)。唯一的區(qū)別是，將使用邊框來(lái)代替平面按鈕所使用的背景顏色。以下代碼是按鈕處于正常的情況下的狀態(tài)。

1. 按鈕邊框顏色

綠 藍(lán) 紅 灰 黑

可以使用 border 屬性設(shè)置按鈕邊框顏色:

例：

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}

2. 鼠標(biāo)懸停按鈕

可以使用 :hover 選擇器來(lái)修改鼠標(biāo)懸停在按鈕上的樣式。

提示: 可以使用 transition-duration 屬性來(lái)設(shè)置 "hover" 效果的速度:

例：

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

鼠標(biāo)放在對(duì)應(yīng)的色塊上，顯示相對(duì)應(yīng)的顏色。

3. 按鈕陰影

陰影按鈕 鼠標(biāo)懸停后顯示陰影。

使用 box-shadow 屬性來(lái)為按鈕添加陰影。

例：

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

4. 按鈕寬度

寬度：250px，50% ，100%

默認(rèn)情況下，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長(zhǎng)度 )。可以使用 width 屬性來(lái)設(shè)置按鈕的寬度:

提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。

CSS 實(shí)例

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}

三、按鈕組

1. 移除外邊距并添加 float:left 來(lái)設(shè)置按鈕組:

CSS 實(shí)例

.button {
    float: left;
}

2. 帶邊框按鈕組

可以使用 border 屬性來(lái)設(shè)置帶邊框的按鈕組:

CSS 實(shí)例

.button {
    float: left;
    border: 1px solid green
}

四、按鈕動(dòng)畫(huà)

1. 按樣式CSS按鈕

這些“按下”式按鈕結(jié)合了一些平面設(shè)計(jì)和假象，讓用戶感覺(jué)他們實(shí)際上按下了按鈕。當(dāng)用戶按下它時(shí)，它似乎陷入了頁(yè)面。它的實(shí)現(xiàn)需要用到陰影來(lái)設(shè)置，使其具有3D彈出外觀。以下代碼是按鈕處于正常的情況下的狀態(tài)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>編程字典</title>
  <style>
.pm button {
   width: 200px;
   height: 100px;
 color: #fff;
 background-color: #6496c8;
 border: none;
 border-radius: 15px;
 box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
  <div class="pm"> <button class="button">Click Me</button>
  </div>
</body>
</html>   

五、總結(jié)

本文基于Html基礎(chǔ)，主要介紹了Html中按鈕組件的使用，對(duì)于按鈕中需要用到的做了詳細(xì)的講解，用豐富的案例 ，多種樣式展示，幫助大家去更好的理解 。

最后，希望可以幫助大家更好的學(xué)習(xí)CSS3。

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲(chóng)與數(shù)據(jù)挖掘知識(shí)，可前往專(zhuān)業(yè)網(wǎng)站：http://pdcfighting.com/