首頁 >web前端 >css教學 >現代CSS按鈕基礎知識的介紹

現代CSS按鈕基礎知識的介紹

Christopher Nolan
Christopher Nolan原創
2025-02-21 12:04:16368瀏覽

An Introduction to the Basics of Modern CSS Buttons

網頁按鈕設計:三種風格及CSS實現

本文更新於2016年7月9日,已將<a></a>標籤替換為<button></button>標籤,以符合現代無障礙最佳實踐。如果您正在處理按鈕,請始終堅持使用<button></button>標籤。

按鈕是任何網頁最重要的組成部分之一,它們具有許多不同的狀態和功能,所有這些都需要與之前的設計決策正確匹配。在本文中,我們將介紹三種按鈕設計理念,以及CSS代碼和工具,以幫助新開發者創建自己的按鈕。

在深入探討各種按鈕設計理念之前,我們需要回顧一下CSS按鈕的一些基礎知識。如果您不知道哪些CSS組件會發生變化,那麼了解扁平化UI和Material Design在思想上的差異就毫無意義。

讓我們快速回顧一下CSS按鈕的基礎知識。

關鍵要點

  • 使用<button></button>標籤是現代無障礙最佳實踐中處理按鈕的推薦方法。
  • 良好的按鈕設計應確保無障礙性,按鈕應易於殘疾人和使用舊版瀏覽器的用戶訪問,並應包含簡單的文本,以便用戶立即理解按鈕的目的。
  • 按鈕設計的三個主要基本要素是顏色、陰影和過渡時間,這些可以使用CSS偽類(如:hover:active)進行操作。
  • 本文提供了三種按鈕樣式的示例:簡單的黑白按鈕、扁平化UI按鈕和Material Design按鈕,每種都有其獨特的設計方法。
  • 要創建您自己的按鈕設計,建議使用CSS3 Button Generator之類的工具。

CSS按鈕基礎

良好按鈕的定義因網站而異,但存在一些非技術性標準:

  1. 無障礙性 – 這是最重要的。按鈕應該易於殘疾人和使用舊版瀏覽器的用戶訪問。網絡的開放性是美麗的,不要用粗心的CSS破壞它。
  2. 簡潔的文本 – 保持按鈕內的文本簡短明了。用戶應該能夠立即理解按鈕的目的以及它將把他們帶到哪裡。

您在線上看到的幾乎所有按鈕都會使用顏色變化、轉換時間以及邊框和陰影變化的一些變體。這些可以使用各種CSS偽類來利用。我們將重點介紹其中的兩個——:hover:active:hover偽類定義了當鼠標懸停在對像上時CSS應該如何變化。 :active最常在用戶按下鼠標按鈕和釋放鼠標按鈕之間執行。

可以使用偽類更改按鈕的整個顯示,但這並不是一種用戶友好的方法。對於初學者來說,一個好的策略是在保持按鈕熟悉性的同時,對按鈕的基本要素進行小的或簡單的更改。按鈕的三個主要基本要素是顏色、陰影和轉換時間。

基本要素1——顏色

這是最常見的變化。我們可以更改各種屬性的顏色,最簡單的屬性是colorbackground-colorborder屬性。在我們跳轉到示例之前,讓我們首先關注如何選擇按鈕顏色:

  1. 顏色組合 – 使用互補的顏色。 Colorhexa是一個查找哪些顏色可以一起使用的絕佳工具。如果您仍在尋找顏色,請查看Flat UI顏色選擇器。
  2. 匹配您的調色板 – 通常最好匹配您正在使用的任何調色板。如果您仍在尋找調色板,請查看lolcolors。

基本要素2——陰影

box-shadow允許您在對象周圍添加陰影。可以為每一側添加獨特的陰影,扁平化UI和Material Design都利用了這個想法。要了解更多關於box-shadow的信息,請查看MDN box-shadow文檔。

基本要素3——過渡持續時間

transition-duration允許您為CSS更改添加時間刻度。沒有轉換時間的按鈕會立即更改為其:hover CSS,這可能會讓用戶感到反感。本指南中的許多按鈕都利用轉換時間來營造自然感。

以下示例在:hover時以柔和的方式(超過0.5秒)轉換按鈕樣式:

<code class="language-css">.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;
}</code>

運行轉換的代碼很複雜,因此舊版瀏覽器對轉換的處理方式略有不同。因此,我們需要為舊版瀏覽器包含供應商前綴。

<code class="language-css">transition-duration: 0.5s /* 这是标准的,并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>

刪除默認按鈕樣式

為了從<button></button>元素中去除默認的瀏覽器樣式,以便我們可以為它們提供自定義樣式,我們包含以下CSS:

<code class="language-css">button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}</code>

但是,最好將其應用於按鈕元素上的類,而不是默認情況下應用於所有按鈕。

有很多複雜而有趣的方法可以修改轉換如何更改您的CSS,本快速回顧只涵蓋了基礎知識。

三種按鈕樣式

1 — 簡單的黑白按鈕

這通常是我在我的副項目中添加的第一個按鈕,因為它的簡潔性適用於各種各樣的樣式。此樣式利用了黑白的自然完美對比。

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

<code class="language-css">.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;
}</code>

在上面的樣式中,您會看到字體和background-color.2s的轉換持續時間內雙向變化。這是一個非常簡單的示例。要從此處構建,您可以使用您最喜歡的品牌的顏色作為靈感。使用BrandColors是一個查找此類品牌顏色的好方法。

2 — 扁平化UI按鈕

扁平化UI專注於極簡主義,並通過小的動作講述一個大的故事。一旦我的項目開始成形,我通常會從黑白按鈕遷移到扁平化UI按鈕。扁平化UI按鈕足夠簡潔,可以融入大多數設計中。

讓我們通過添加按鈕移動來模擬3D按鈕,從而改進我們之前的按鈕。

此示例包含五個按鈕,但由於唯一的變化是顏色,我們將重點關注第一個按鈕。

<code class="language-css">transition-duration: 0.5s /* 这是标准的,并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>

此按鈕有三種狀態,常規(無狀態名稱)、:hover:active

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

CSS變量並不新鮮,但有一些是以新的方式使用的。 border不是實心均勻線,而是使用border-bottomborder-leftborder-right來創建3D深度效果。

扁平化UI按鈕大量利用:active。當我們的示例按鈕變為:active時,會發生兩件事。

  1. border-bottom從3px更改為1px。這會導致按鈕下方的陰影縮小,並將整個按鈕對象向下移動幾個像素。雖然簡單,但這一個變化有助於用戶感覺他們正在將按鈕點擊到頁面中。
  2. 顏色發生變化。背景顏色變暗,模擬物理上遠離用戶並進入頁面的運動。同樣,這種細微的變化提醒用戶他們正在點擊一個按鈕。

扁平化UI按鈕重視講述大故事的簡單和最小的動作。許多使用border-bottom來創建淺層運動。值得注意的是,一些扁平化UI按鈕根本不移動,只利用顏色變化。

3 — Material Design

Material Design是一種設計理念,它推廣信息卡片,並具有引人注目的動作。 Google設計了“Material Design”的概念,並在Material Design主頁上列出了三個主要原則:

  • Material是一種隱喻
  • 大膽、圖形化、有目的性
  • 運動賦予意義

為了更好地了解這三個原則,讓我們看看Material Design的實際應用。

注意:此示例不包含<button></button>標籤,因為它遵循Polymer的按鈕默認標記,但是如果您在一個大型項目中實現Polymer,那麼值得探索在您的實現中使用<button></button>標籤而不是<a></a>標籤。我們將在未來的文章中更詳細地探討這一點。

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

Polymer是一個組件和工具框架,用於幫助設計網站。如果您熟悉Bootstrap,Polymer非常相似。上面找到的強大的漣漪效果只需一行代碼即可添加。

<code class="language-css">.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;
}</code>

<paper-ripple fit></paper-ripple>是一個Polymer組件。通過在HTML的開頭導入Polymer,我們可以訪問流行的框架及其組件。在Polymer項目主頁上了解更多信息。

現在我們了解了Polymer是什麼以及漣漪來自哪裡(它的工作原理是另一個故事),讓我們討論一下有助於實現Material Design原則的CSS,使按鈕脫穎而出。

<code class="language-css">transition-duration: 0.5s /* 这是标准的,并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */</code>

這些按鈕使用box-shadow來實現大部分設計。讓我們研究一下box-shadow如何變化並發揮其魔力,方法是刪除任何不更改的CSS:

<code class="language-css">button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}</code>

box-shadow用於在每個按鈕的左側和底部放置一個薄薄的暗影。單擊時,陰影會延伸得更遠,並且變得不那麼暗。此動作模擬了從頁面跳到用戶面前的按鈕的3D陰影。此動作是Material Design樣式及其實際應用原則的一部分。

可以通過將Polymer與box-shadow效果相結合來製作Material Design按鈕。

  • Material是一種隱喻——通過利用box-shadow,我們可以模擬現實世界對像中出現的3D陰影
  • 大膽、圖形化、有目的性——這對於明亮的藍色和綠色按鈕更真實,並且這些按鈕完全滿足了這一點。
  • 運動賦予意義——使用Polymer和box-shadow轉換,我們可以在用戶單擊按鈕時創建大量運動。

本文介紹瞭如何使用三種不同的設計方法製作按鈕。如果您想製作自己的按鈕設計原型,我建議您使用CSS3 Button Generator。

結論

黑白按鈕簡單可靠。將黑色和白色替換為您品牌的顏色,即可快速獲得與您的網站相關的按鈕。扁平化UI按鈕很簡單,並利用小的動作和顏色來講述大的故事。 Material Design按鈕利用大規模的複雜動作來模擬現實世界的陰影,從而吸引用戶的注意力。

希望本指南能幫助CSS新手了解使按鈕如此強大和創造性廣泛傳播的構建塊。

關於現代CSS按鈕的常見問題

如何創建一個簡單的CSS按鈕?

創建簡單的CSS按鈕包括在您的CSS文件中定義一個類,並將其應用於HTML文件中的按鈕元素。例如,您可以在CSS文件中定義一個.button類,其中包含background-colorcolorborderpaddingtext-aligntext-decorationdisplaycursor等屬性。然後,在HTML文件中,您可以創建一個按鈕元素並將.button類應用於它。這將根據.button類中定義的屬性來設置按鈕的樣式。

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

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

如何創建帶有圖標的CSS按鈕?

帶有圖標的CSS按鈕可以通過使用圖標字體或SVG圖標來創建。 Font Awesome等圖標字體提供了各種易於使用CSS設置樣式的圖標。要使用圖標字體,您需要在HTML文件中包含圖標字體的CSS文件,然後使用您要使用的圖標的相應類。另一方面,SVG圖標可以直接嵌入到HTML文件中並使用CSS設置樣式。

如何創建帶有漸變的CSS按鈕?

可以使用linear-gradient()函數或radial-gradient()函數創建帶有漸變的CSS按鈕。這些函數分別用於定義線性漸變或徑向漸變。漸變由兩個或多個顏色停止點定義,這些顏色停止點是漸變在其間轉換的顏色。顏色停止點由顏色和沿漸變線的顏色位置定義。

如何創建帶有圓角的CSS按鈕?

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

如何創建帶有陰影的CSS按鈕?

可以使用box-shadow屬性創建帶有陰影的CSS按鈕。此屬性用於將陰影效果應用於元素。 box-shadow屬性採用多個值,包括陰影的水平偏移量、垂直偏移量、模糊半徑、擴展半徑和顏色。

如何創建帶有過渡的CSS按鈕?

可以使用transition屬性創建帶有過渡的CSS按鈕。此屬性用於控制當用戶將鼠標懸停在按鈕上或單擊按鈕時,從一種樣式更改為另一種樣式的速度。 transition屬性採用多個值,包括要轉換的屬性、轉換的持續時間、計時函數和延遲。

如何創建帶有動畫的CSS按鈕?

可以使用animation屬性和keyframes規則創建帶有動畫的CSS按鈕。 animation屬性用於指定動畫的名稱、持續時間、計時函數、延遲、迭代次數、方向、填充模式和播放狀態。 keyframes規則用於為動畫的每個階段指定樣式。

如何創建響應式CSS按鈕?

可以使用媒體查詢創建響應式CSS按鈕。媒體查詢用於為不同的設備或屏幕尺寸應用不同的樣式。例如,您可以定義一個媒體查詢,該查詢會更改寬度小於600像素的屏幕的按鈕的大小、填充和字體大小。

如何創建具有不同形狀的CSS按鈕?

可以使用border-radius屬性和transform屬性創建具有不同形狀的CSS按鈕。 border-radius屬性可用於創建圓形或橢圓形按鈕。 transform屬性可用於旋轉、縮放、傾斜或平移按鈕。

以上是現代CSS按鈕基礎知識的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn