資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS 更改按鈕的填充
在網頁開發中，按鈕填充指的是按鈕文字或圖示與其邊緣之間存在的間隙。使用 CSS（層疊樣式表），您可以更改按鈕的填充。
CSS padding 屬性用於向元素的邊框及其周圍區域新增空間。填充至關重要，因為它是 CSS 盒模型中最內層的區域，會影響元素的間距。除了填充之外，CSS 盒模型還包含元素的邊距和邊框樣式。
CSS 填充對於實現設計美觀和功能之間的理想平衡至關重要，這對於建立使用者友好的網站至關重要，因為兩者缺一不可。這就是 CSS 填充發揮作用的地方。
使用 CSS 填充按鈕
在向網站上的按鈕元素新增號召性用語時，應始終有效地填充它們，以便它們足夠突出，以便使用者點選。您可以像填充文字元素一樣填充按鈕。
語法
以下是 HTML 按鈕的語法
<button>...</button&>
示例
讓我們看下面的例子，我們將更改按鈕的填充。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D5F5E3;
text-align: center;
}
.tp {
background-color: #DE3163;
border: none;
color: #17202A;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 15px 20px;
cursor: pointer;
}
.x1 {
padding: 3px 10px;
}
.x2 {
padding: 10px 15px;
}
</style>
</head>
<body>
<button class="tp x1">Button 1</button>
<button class="tp x2">Button 2</button>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，其中包含兩個具有不同填充的按鈕顯示在網頁上。
示例
考慮另一種情況，我們將看到填充按鈕和普通按鈕之間的區別。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.tp {
background-color: #F9E79F;
border: none;
color: #17202A;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 15px 20px;
cursor: pointer;
}
.x2 {
padding: 10px 15px;
}
</style>
</head>
<body>
<button>Button 1</button> : Normal Button <br>
<br>
<button class="tp x2">Button 2</button> : Padded Button <br>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示兩個按鈕：一個是普通按鈕，另一個是網頁上填充的按鈕。
更新於： 2024年1月8日
4K+ 閱讀量
廣告