在 HTML 中，我们使用 button 标签来创建按钮，但通过使用 CSS 属性，我们可以设置按钮的样式。按钮帮助我们创建用户交互和事件处理。它们是广泛使用的网页元素之一。
在表单提交过程中，为了查看或获取一些信息，我们一般使用按钮。
让我们看看按钮的基本样式。
有多个属性可用于设置按钮元素的样式。让我们一一讨论它们。
正如我们之前讨论过的，此属性用于设置按钮元素的背景颜色。
element {
// background-color style
}
<!DOCTYPE html>
<html>
<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: blue;
}
.b3 {
background-color: violet;
}
</style>
</head>
<body>
<h1>The background-color property.</h1>
<button class="b1">Red color button</button>
<button class="b2">Blue color button</button>
<button class="b3">Violet color button</button>
</body>
</html>
边界
用于设置按钮的边框。它是border-width、border-color和border-style的简写属性。
element {
// border style
}
<!DOCTYPE html>
<html>
<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
}
.b2 {
background-color: blue;
border:5px brown solid;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
}
.b4{
background-color:orange;
border: 5px red dashed;
}
.b5{
background-color: gray;
border: 5px black dotted;
}
.b6{
background-color: lightblue;
border:5px blue double;
}
</style>
</head>
<body>
<h1>The border property</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>
边界半径
它用于制作按钮的圆角。它设置按钮的边框半径。
element {
// border-radius property
}
<!DOCTYPE html>
<html>
<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
}
.b2 {
background-color: blue;
border:5px brown solid;
border-radius: 7px;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
border-radius: 10px;
}
.b4{
background-color:orange;
border: 5px red dashed;
border-radius: 20px;
}
.b5{
background-color: gray;
border: 5px black dotted;
border-radius: 30px;
}
.b6{
background-color: lightblue;
border:5px blue double;
border-radius: 25px;
}
</style>
</head>
<body>
<h1>The border-radius property</h1>
<h2>Below there is the border name and border-radius</h2>
<button class="b1">none</button>
<button class="b2">solid 7px</button>
<button class="b3">groove 10px</button>
<button class="b4">dashed 20px</button>
<button class="b5">dotted 30px</button>
<button class="b6">double 25px</button>
</body>
</html>
box-shadow
顾名思义，它用于创建按钮框的阴影。它用于为按钮添加阴影。我们还可以在按钮悬停期间创建阴影。
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
<!DOCTYPE html>
<html>
<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1{
background-color: lightblue;
border:5px red double;
border-radius: 25px;
color:black;
box-shadow : 0 8px 16px 0 black,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.b2{
background-color: lightblue;
border:5px red dotted;
color:black;
border-radius: 25px;
}
.b2:hover{
box-shadow : 0 8px 16px 0 black,
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button class="b1">Shadow on button</button>
<button class="b2">Box-shadow on hover</button>
</body>
</html>
填充
它用于设置按钮填充。
element {
// padding style
}
让我们用一个插图来理解它。
<!DOCTYPE html>
<html>
<head>
<title>
button background Color
</title>
<style>
body{
text-align: center;
}
button {
color:lightgoldenrodyellow;
font-size: 30px;
}
.b1 {
background-color: red;
border:none;
padding: 16px;
}
.b2 {
background-color: blue;
border:5px brown solid;
padding:15px 30px 25px 40px;
}
.b3 {
background-color: yellow;
color:black;
border:5px red groove;
padding-top:30px;
}
.b4{
background-color:orange;
border: 5px red dashed;
padding-bottom:40px;
}
.b5{
background-color: gray;
border: 5px black dotted;
padding-left: 40px;
}
.b6{
background-color: lightblue;
border:5px blue double;
padding-right: 40px;;
}
</style>
</head>
<body>
<h1>The padding property</h1>
<button class="b1">none</button>
<button class="b2">solid</button>
<button class="b3">groove</button>
<button class="b4">dashed</button>
<button class="b5">dotted</button>
<button class="b6">double</button>
</body>
</html>