数据结构
网络
关系型数据库管理系统
操作系统
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+ 阅读量
广告