javascript css按鈕

| | | | | | | |

在設計網站時,您通常會有一個按鈕,您希望它以某種方式出現。例如,您可能希望按鈕比頁面上的其他元素具有背景顏色,以吸引用戶對按鈕的注意。

使用 CSS,開發人員可以創建帶有樣式的按鈕。 CSS 允許您更改其他內容。

按鈕的顏色、文本大小、邊框、寬度和高度,本教程將通過示例討論如何使用一系列 CSS 屬性來設置 HTML 樣式按鈕。閱讀完本教程後,您將成為使用 CSS 設置按鈕樣式的專家。

按鈕概述

您可以通過多種 HTML 方式定義按鈕。兩種最常見的方法是 找到適合你的訓練營

如果我們想給我們的按鈕設置樣式,換句話說,要自定義頁面的外觀,我們必須使用css。在本文中,我們將討論如何在按鈕上做以下事情:..

  • 更改背景顏色
  • 更改文本顏色
  • 更改文本大小。
  • 添加填充。
  • 圓角。
  • 添加彩色邊框。
  • 使用它:....懸停功能
  • 添加陰影
  • 更改寬度
  • 關閉
  • 為其設置動畫。

我們還將討論如何創建水平和垂直按鈕組。

Back-plane color

在設計按鈕的過程中,您可能要做的第一件事就是設置背景顏色-plan for button。默認情況下,按鈕具有白色背景和黑色文本。通過使用 CSS 背景顏色,我們可以更改按鈕的背景顏色。

假設您正在為網站設計一個按鈕,並且您希望該按鈕具有粉紅色背景。我們可以使用以下 CSS 代碼更改按鈕的顏色:

我們的代碼返回:

Screen Shot 2020 04 03 至 13.10.32

使用背景顏色屬性,我們改變了背景顏色按鈕的顏色變為粉紅色。我們可以使用此屬性將按鈕的背景顏色更改為顏色。

文本顏色

要更改按鈕的文本顏色,您可以使用color 屬性。一個按鈕,並希望按鈕具有粉紅色背景和綠色文本。我們可以使用以下代碼創建此按鈕:

我們的代碼返回:

Screen Shot 2020 03 25 A 08.33.23

我們的按鈕和以前一樣大小,但是現在裡面的字符大小是20px。我們使用font size屬性來設置按鈕中文字的大小。

Padding

在設計按鈕時,你可能會決定您希望按鈕內的文本和按鈕的外牆之間有一定的空間。這就是緩衝屬性發揮作用的地方。

填充屬性使用長度指示符(px、em 和等等)或百分比值,用於定義文本按鈕及其邊框之間的一定空間。

假設我們要在頁面上創建兩個按鈕。一個按鈕應該有 40px 的內邊距,另一個應該有 20px 的內邊距。我們可以使用以下代碼創建這些按鈕:

我們的代碼返回:

截屏2020 年 3 月 25 日至 08.39.39 “數據 srcset = https://744025.smushcdn.com/1245953/wp-content /uploads/2020/04/Screen-Shot-2020-03-25-at-08.39.39- 20x12.png?lossy=1&strip=1&webp=1 20w, https://744025 .smushcdn.com / 1245953 / wp- content / uploads / 2020/04 / screen-Shot-25/03/2020-à-08.39.39 .png?有損 = 1 & 波段 = 1 & webp = 1 128W
截圖2020 03 25 to 08.40 .42

我們的第一個按鈕在按鈕內部的文本和按鈕邊框之間有20像素的邊框。我們的第二個按鈕在文本和按鈕邊緣之間有一個 40 像素的邊框。對於這些按鈕,為確保有足夠的空間用於填充,我們不指定寬度或高度屬性。 (我們將在下面討論這些屬性。)

圓角

默認情況下,HTML 中的按鈕具有方形邊框。但是,您可以決定是否希望按鈕具有圓角。

您可以使用border-radius 屬性來創建帶有圓角的矩形按鈕。下面是三個使用border-radius 屬性的代碼示例。為了說明不同半徑大小的效果,每個示例使用不同大小的邊框半徑。

我們的代碼返回:

我們的按鈕有一個白色的背景,它的內容是黑色的,並且在所有的邊緣都有25px的內邊距。我們使用border屬性在我們的按鈕周圍創建了一個3像素寬的實心邊框按鈕並將我們的邊框顏色設置為 # ffb6c1,這是淺粉色的十六進制值。

如果您想了解有關邊框屬性的更多信息,請閱讀我們關於 CSS 邊框屬性的文章

懸停

您可以使用選擇器 CSS.hover 來指示網頁在用戶將鼠標懸停在按鈕上時更改按鈕的樣式

假設您創建了一個帶有黑色文本和白色背景的按鈕,並且您希望文本顏色變為白色,並且當用戶將鼠標懸停在其上時其背景顏色變為綠色。她。我們可以使用以下代碼來做到這一點:

這是我們代碼的結果:

“屏幕截圖

上圖中的第一個按鈕顯示了我們按鈕的樣子就像用戶將鼠標懸停在按鈕上一樣。如您所見,代碼返回一個帶有黑色文本、粉紅色邊框和 25 像素填充的白色按鈕。這是按鈕的默認狀態。但是當鼠標懸停在鼠標懸停在按鈕,按鈕的背景顏色變為綠色,按鈕的文本顏色變為白色。

只要用戶的光標離開按鈕,按鈕就會恢復到默認狀態。

,你也可以使用過渡持續時間屬性來指示按鈕在用戶將光標懸停在按鈕上之後應該改變多長時間。所以如果我們想在上面的按鈕改變之前花 1 秒時間(在綠色背景和白色文字)我們可以使用這個代碼:

現在當鼠標懸停在按鈕上時,更改按鈕需要一秒鐘。您可以在我們的 CSS 過渡初學者指南中閱讀更多關於 CSS 過渡的信息。

陰影

你可以使用CSS box-shadow 屬性創建按鈕陰影。 box-shadow 屬性接受幾個參數。您可以在我們的 box-shadow CSS 教程中了解有關這些參數的更多信息。

假設我們設計了一個按鈕並且我們希望它有一個陰影。我們可以使用以下代碼為按鈕創建這個陰影:

我們的代碼返回:

Screenshot 2020 03 25 to 08.57.09

在這個例子中,我們為按鈕添加了陰影。我們為我們的陰影指定的參數如下: