網(wǎng)頁(yè)按鈕設(shè)計(jì)：三種風(fēng)格及CSS實(shí)現(xiàn)

本文更新于2016年7月9日，已將<a></a>標(biāo)簽替換為<button></button>標(biāo)簽，以符合現(xiàn)代無(wú)障礙最佳實(shí)踐。如果您正在處理按鈕，請(qǐng)始終堅(jiān)持使用<button></button>標(biāo)簽。

按鈕是任何網(wǎng)頁(yè)最重要的組成部分之一，它們具有許多不同的狀態(tài)和功能，所有這些都需要與之前的設(shè)計(jì)決策正確匹配。在本文中，我們將介紹三種按鈕設(shè)計(jì)理念，以及CSS代碼和工具，以幫助新開(kāi)發(fā)者創(chuàng)建自己的按鈕。

在深入探討各種按鈕設(shè)計(jì)理念之前，我們需要回顧一下CSS按鈕的一些基礎(chǔ)知識(shí)。如果您不知道哪些CSS組件會(huì)發(fā)生變化，那么了解扁平化UI和Material Design在思想上的差異就毫無(wú)意義。

讓我們快速回顧一下CSS按鈕的基礎(chǔ)知識(shí)。

關(guān)鍵要點(diǎn)

• 使用<button></button>標(biāo)簽是現(xiàn)代無(wú)障礙最佳實(shí)踐中處理按鈕的推薦方法。
• 良好的按鈕設(shè)計(jì)應(yīng)確保無(wú)障礙性，按鈕應(yīng)易于殘疾人和使用舊版瀏覽器的用戶訪問(wèn)，并應(yīng)包含簡(jiǎn)單的文本，以便用戶立即理解按鈕的目的。
• 按鈕設(shè)計(jì)的三個(gè)主要基本要素是顏色、陰影和過(guò)渡時(shí)間，這些可以使用CSS偽類（如:hover和:active）進(jìn)行操作。
• 本文提供了三種按鈕樣式的示例：簡(jiǎn)單的黑白按鈕、扁平化UI按鈕和Material Design按鈕，每種都有其獨(dú)特的設(shè)計(jì)方法。
• 要?jiǎng)?chuàng)建您自己的按鈕設(shè)計(jì)，建議使用CSS3 Button Generator之類的工具。

CSS按鈕基礎(chǔ)

良好按鈕的定義因網(wǎng)站而異，但存在一些非技術(shù)性標(biāo)準(zhǔn)：

1. 無(wú)障礙性 – 這是最重要的。按鈕應(yīng)該易于殘疾人和使用舊版瀏覽器的用戶訪問(wèn)。網(wǎng)絡(luò)的開(kāi)放性是美麗的，不要用粗心的CSS破壞它。
2. 簡(jiǎn)潔的文本 – 保持按鈕內(nèi)的文本簡(jiǎn)短明了。用戶應(yīng)該能夠立即理解按鈕的目的以及它將把他們帶到哪里。

您在線上看到的幾乎所有按鈕都會(huì)使用顏色變化、轉(zhuǎn)換時(shí)間以及邊框和陰影變化的一些變體。這些可以使用各種CSS偽類來(lái)利用。我們將重點(diǎn)介紹其中的兩個(gè)——:hover和:active。:hover偽類定義了當(dāng)鼠標(biāo)懸停在對(duì)象上時(shí)CSS應(yīng)該如何變化。:active最常在用戶按下鼠標(biāo)按鈕和釋放鼠標(biāo)按鈕之間執(zhí)行。

可以使用偽類更改按鈕的整個(gè)顯示，但這并不是一種用戶友好的方法。對(duì)于初學(xué)者來(lái)說(shuō)，一個(gè)好的策略是在保持按鈕熟悉性的同時(shí)，對(duì)按鈕的基本要素進(jìn)行小的或簡(jiǎn)單的更改。按鈕的三個(gè)主要基本要素是顏色、陰影和轉(zhuǎn)換時(shí)間。

基本要素1——顏色

這是最常見(jiàn)的變化。我們可以更改各種屬性的顏色，最簡(jiǎn)單的屬性是color、background-color和border屬性。在我們跳轉(zhuǎn)到示例之前，讓我們首先關(guān)注如何選擇按鈕顏色：

1. 顏色組合 – 使用互補(bǔ)的顏色。Colorhexa是一個(gè)查找哪些顏色可以一起使用的絕佳工具。如果您仍在尋找顏色，請(qǐng)查看Flat UI顏色選擇器。
2. 匹配您的調(diào)色板 – 通常最好匹配您正在使用的任何調(diào)色板。如果您仍在尋找調(diào)色板，請(qǐng)查看lolcolors。

基本要素2——陰影

box-shadow允許您在對(duì)象周圍添加陰影?？梢詾槊恳粋?cè)添加獨(dú)特的陰影，扁平化UI和Material Design都利用了這個(gè)想法。要了解更多關(guān)于box-shadow的信息，請(qǐng)查看MDN box-shadow文檔。

基本要素3——過(guò)渡持續(xù)時(shí)間

transition-duration允許您為CSS更改添加時(shí)間刻度。沒(méi)有轉(zhuǎn)換時(shí)間的按鈕會(huì)立即更改為其:hover CSS，這可能會(huì)讓用戶感到反感。本指南中的許多按鈕都利用轉(zhuǎn)換時(shí)間來(lái)營(yíng)造自然感。

以下示例在:hover時(shí)以柔和的方式（超過(guò)0.5秒）轉(zhuǎn)換按鈕樣式：

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

運(yùn)行轉(zhuǎn)換的代碼很復(fù)雜，因此舊版瀏覽器對(duì)轉(zhuǎn)換的處理方式略有不同。因此，我們需要為舊版瀏覽器包含供應(yīng)商前綴。

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

刪除默認(rèn)按鈕樣式

為了從<button>元素中去除默認(rèn)的瀏覽器樣式，以便我們可以為它們提供自定義樣式，我們包含以下CSS：

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

但是，最好將其應(yīng)用于按鈕元素上的類，而不是默認(rèn)情況下應(yīng)用于所有按鈕。

有很多復(fù)雜而有趣的方法可以修改轉(zhuǎn)換如何更改您的CSS，本快速回顧只涵蓋了基礎(chǔ)知識(shí)。

三種按鈕樣式

1 — 簡(jiǎn)單的黑白按鈕

這通常是我在我的副項(xiàng)目中添加的第一個(gè)按鈕，因?yàn)樗暮?jiǎn)潔性適用于各種各樣的樣式。此樣式利用了黑白的自然完美對(duì)比。

這兩種變化非常相似，因此我們只將介紹帶有白色背景的黑色按鈕的代碼。要獲得另一個(gè)按鈕，只需翻轉(zhuǎn)每個(gè)白色和黑色即可。

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

在上面的樣式中，您會(huì)看到字體和background-color在.2s的轉(zhuǎn)換持續(xù)時(shí)間內(nèi)雙向變化。這是一個(gè)非常簡(jiǎn)單的示例。要從此處構(gòu)建，您可以使用您最喜歡的品牌的顏色作為靈感。使用BrandColors是一個(gè)查找此類品牌顏色的好方法。

2 — 扁平化UI按鈕

扁平化UI專注于極簡(jiǎn)主義，并通過(guò)小的動(dòng)作講述一個(gè)大的故事。一旦我的項(xiàng)目開(kāi)始成形，我通常會(huì)從黑白按鈕遷移到扁平化UI按鈕。扁平化UI按鈕足夠簡(jiǎn)潔，可以融入大多數(shù)設(shè)計(jì)中。

讓我們通過(guò)添加按鈕移動(dòng)來(lái)模擬3D按鈕，從而改進(jìn)我們之前的按鈕。

此示例包含五個(gè)按鈕，但由于唯一的變化是顏色，我們將重點(diǎn)關(guān)注第一個(gè)按鈕。

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

此按鈕有三種狀態(tài)，常規(guī)（無(wú)狀態(tài)名稱）、:hover和:active。

值得注意的是，:hover只包含一行代碼，降低不透明度。這是一個(gè)有用的技巧，它可以使按鈕看起來(lái)更輕，而無(wú)需您找到一種新的、實(shí)際上更輕的顏色。

CSS變量并不新鮮，但有一些是以新的方式使用的。border不是實(shí)心均勻線，而是使用border-bottom、border-left和border-right來(lái)創(chuàng)建3D深度效果。

扁平化UI按鈕大量利用:active。當(dāng)我們的示例按鈕變?yōu)?code>:active時(shí)，會(huì)發(fā)生兩件事。

1. border-bottom從3px更改為1px。這會(huì)導(dǎo)致按鈕下方的陰影縮小，并將整個(gè)按鈕對(duì)象向下移動(dòng)幾個(gè)像素。雖然簡(jiǎn)單，但這一個(gè)變化有助于用戶感覺(jué)他們正在將按鈕點(diǎn)擊到頁(yè)面中。
2. 顏色發(fā)生變化。背景顏色變暗，模擬物理上遠(yuǎn)離用戶并進(jìn)入頁(yè)面的運(yùn)動(dòng)。同樣，這種細(xì)微的變化提醒用戶他們正在點(diǎn)擊一個(gè)按鈕。

扁平化UI按鈕重視講述大故事的簡(jiǎn)單和最小的動(dòng)作。許多使用border-bottom來(lái)創(chuàng)建淺層運(yùn)動(dòng)。值得注意的是，一些扁平化UI按鈕根本不移動(dòng)，只利用顏色變化。

3 — Material Design

Material Design是一種設(shè)計(jì)理念，它推廣信息卡片，并具有引人注目的動(dòng)作。Google設(shè)計(jì)了“Material Design”的概念，并在Material Design主頁(yè)上列出了三個(gè)主要原則：

• Material是一種隱喻
• 大膽、圖形化、有目的性
• 運(yùn)動(dòng)賦予意義

為了更好地了解這三個(gè)原則，讓我們看看Material Design的實(shí)際應(yīng)用。

注意：此示例不包含<button>標(biāo)簽，因?yàn)樗裱璓olymer的按鈕默認(rèn)標(biāo)記，但是如果您在一個(gè)大型項(xiàng)目中實(shí)現(xiàn)Polymer，那么值得探索在您的實(shí)現(xiàn)中使用<button>標(biāo)簽而不是<a>標(biāo)簽。我們將在未來(lái)的文章中更詳細(xì)地探討這一點(diǎn)。

這些按鈕利用了兩個(gè)主要思想——box-shadow和Polymer。

Polymer是一個(gè)組件和工具框架，用于幫助設(shè)計(jì)網(wǎng)站。如果您熟悉Bootstrap，Polymer非常相似。上面找到的強(qiáng)大的漣漪效果只需一行代碼即可添加。

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

<paper-ripple fit></paper-ripple>是一個(gè)Polymer組件。通過(guò)在HTML的開(kāi)頭導(dǎo)入Polymer，我們可以訪問(wèn)流行的框架及其組件。在Polymer項(xiàng)目主頁(yè)上了解更多信息。

現(xiàn)在我們了解了Polymer是什么以及漣漪來(lái)自哪里（它的工作原理是另一個(gè)故事），讓我們討論一下有助于實(shí)現(xiàn)Material Design原則的CSS，使按鈕脫穎而出。

transition-duration: 0.5s /* 這是標(biāo)準(zhǔn)的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

這些按鈕使用box-shadow來(lái)實(shí)現(xiàn)大部分設(shè)計(jì)。讓我們研究一下box-shadow如何變化并發(fā)揮其魔力，方法是刪除任何不更改的CSS：

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

box-shadow用于在每個(gè)按鈕的左側(cè)和底部放置一個(gè)薄薄的暗影。單擊時(shí)，陰影會(huì)延伸得更遠(yuǎn)，并且變得不那么暗。此動(dòng)作模擬了從頁(yè)面跳到用戶面前的按鈕的3D陰影。此動(dòng)作是Material Design樣式及其實(shí)際應(yīng)用原則的一部分。

可以通過(guò)將Polymer與box-shadow效果相結(jié)合來(lái)制作Material Design按鈕。

• Material是一種隱喻——通過(guò)利用box-shadow，我們可以模擬現(xiàn)實(shí)世界對(duì)象中出現(xiàn)的3D陰影
• 大膽、圖形化、有目的性——這對(duì)于明亮的藍(lán)色和綠色按鈕更真實(shí)，并且這些按鈕完全滿足了這一點(diǎn)。
• 運(yùn)動(dòng)賦予意義——使用Polymer和box-shadow轉(zhuǎn)換，我們可以在用戶單擊按鈕時(shí)創(chuàng)建大量運(yùn)動(dòng)。

本文介紹了如何使用三種不同的設(shè)計(jì)方法制作按鈕。如果您想制作自己的按鈕設(shè)計(jì)原型，我建議您使用CSS3 Button Generator。

結(jié)論

黑白按鈕簡(jiǎn)單可靠。將黑色和白色替換為您品牌的顏色，即可快速獲得與您的網(wǎng)站相關(guān)的按鈕。扁平化UI按鈕很簡(jiǎn)單，并利用小的動(dòng)作和顏色來(lái)講述大的故事。Material Design按鈕利用大規(guī)模的復(fù)雜動(dòng)作來(lái)模擬現(xiàn)實(shí)世界的陰影，從而吸引用戶的注意力。

希望本指南能幫助CSS新手了解使按鈕如此強(qiáng)大和創(chuàng)造性廣泛傳播的構(gòu)建塊。

關(guān)于現(xiàn)代CSS按鈕的常見(jiàn)問(wèn)題

如何創(chuàng)建一個(gè)簡(jiǎn)單的CSS按鈕？

創(chuàng)建簡(jiǎn)單的CSS按鈕包括在您的CSS文件中定義一個(gè)類，并將其應(yīng)用于HTML文件中的按鈕元素。例如，您可以在CSS文件中定義一個(gè).button類，其中包含background-color、color、border、padding、text-align、text-decoration、display和cursor等屬性。然后，在HTML文件中，您可以創(chuàng)建一個(gè)按鈕元素并將.button類應(yīng)用于它。這將根據(jù).button類中定義的屬性來(lái)設(shè)置按鈕的樣式。

如何向CSS按鈕添加懸停效果？

可以使用:hover偽類向CSS按鈕添加懸停效果。此偽類用于選擇和設(shè)置當(dāng)用戶指針懸停在其上時(shí)元素的樣式。例如，當(dāng)用戶指針懸停在其上時(shí)，您可以更改按鈕的背景顏色和文本顏色，方法是在按鈕類的:hover偽類中定義這些屬性。

如何創(chuàng)建帶有圖標(biāo)的CSS按鈕？

帶有圖標(biāo)的CSS按鈕可以通過(guò)使用圖標(biāo)字體或SVG圖標(biāo)來(lái)創(chuàng)建。Font Awesome等圖標(biāo)字體提供了各種易于使用CSS設(shè)置樣式的圖標(biāo)。要使用圖標(biāo)字體，您需要在HTML文件中包含圖標(biāo)字體的CSS文件，然后使用您要使用的圖標(biāo)的相應(yīng)類。另一方面，SVG圖標(biāo)可以直接嵌入到HTML文件中并使用CSS設(shè)置樣式。

如何創(chuàng)建帶有漸變的CSS按鈕？

可以使用linear-gradient()函數(shù)或radial-gradient()函數(shù)創(chuàng)建帶有漸變的CSS按鈕。這些函數(shù)分別用于定義線性漸變或徑向漸變。漸變由兩個(gè)或多個(gè)顏色停止點(diǎn)定義，這些顏色停止點(diǎn)是漸變?cè)谄溟g轉(zhuǎn)換的顏色。顏色停止點(diǎn)由顏色和沿漸變線的顏色位置定義。

如何創(chuàng)建帶有圓角的CSS按鈕？

可以使用border-radius屬性創(chuàng)建帶有圓角的CSS按鈕。此屬性用于定義邊框角的半徑。border-radius屬性的值可以用像素或百分比指定。較高的值將創(chuàng)建更圓的角。

如何創(chuàng)建帶有陰影的CSS按鈕？

可以使用box-shadow屬性創(chuàng)建帶有陰影的CSS按鈕。此屬性用于將陰影效果應(yīng)用于元素。box-shadow屬性采用多個(gè)值，包括陰影的水平偏移量、垂直偏移量、模糊半徑、擴(kuò)展半徑和顏色。

如何創(chuàng)建帶有過(guò)渡的CSS按鈕？

可以使用transition屬性創(chuàng)建帶有過(guò)渡的CSS按鈕。此屬性用于控制當(dāng)用戶將鼠標(biāo)懸停在按鈕上或單擊按鈕時(shí)，從一種樣式更改為另一種樣式的速度。transition屬性采用多個(gè)值，包括要轉(zhuǎn)換的屬性、轉(zhuǎn)換的持續(xù)時(shí)間、計(jì)時(shí)函數(shù)和延遲。

如何創(chuàng)建帶有動(dòng)畫的CSS按鈕？

可以使用animation屬性和keyframes規(guī)則創(chuàng)建帶有動(dòng)畫的CSS按鈕。animation屬性用于指定動(dòng)畫的名稱、持續(xù)時(shí)間、計(jì)時(shí)函數(shù)、延遲、迭代次數(shù)、方向、填充模式和播放狀態(tài)。keyframes規(guī)則用于為動(dòng)畫的每個(gè)階段指定樣式。

如何創(chuàng)建響應(yīng)式CSS按鈕？

可以使用媒體查詢創(chuàng)建響應(yīng)式CSS按鈕。媒體查詢用于為不同的設(shè)備或屏幕尺寸應(yīng)用不同的樣式。例如，您可以定義一個(gè)媒體查詢，該查詢會(huì)更改寬度小于600像素的屏幕的按鈕的大小、填充和字體大小。

如何創(chuàng)建具有不同形狀的CSS按鈕？

可以使用border-radius屬性和transform屬性創(chuàng)建具有不同形狀的CSS按鈕。border-radius屬性可用于創(chuàng)建圓形或橢圓形按鈕。transform屬性可用于旋轉(zhuǎn)、縮放、傾斜或平移按鈕。

以上是現(xiàn)代CSS按鈕基礎(chǔ)知識(shí)的介紹的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！