CSS button
在HTML中，我们使用button标签来创建按钮，但是通过使用CSS属性，我们可以为按钮设置样式。按钮可帮助我们创建用户交互和事件处理。它们是网页中广泛使用的元素之一。
在表单提交期间，为了查看或获取一些信息，我们通常使用按钮。
让我们看看其中的基本样式。
按钮中的基本样式
有多个可用于对按钮元素进行样式设置的属性。让我们一个接一个地讨论它们。
background-color
语法
element {
// background-color style
}
示例
<!DOCTYPE html>
<html>
<head>
<title>
按钮背景色
</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>background-color属性</h1>
<button class="b1">红色按钮</button>
<button class="b2">蓝色按钮</button>
<button class="b3">紫罗兰色按钮</button>
</body>
</html>
输出
border
它用于设置广告的
border 按钮。它是
边框宽度，边框颜色和
边框样式的简写属性。
语法
element {
// border style
}
示例
<!DOCTYPE html>
<html>
<head>
<title>
按钮背景色
</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>
输出
border-radius
它用于制作按钮的圆角。设置按钮的边框半径。
语法
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>
按钮背景色
</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>
输出
padding
用于设置元素边框与元素内容之间的空间。
语法
element {
// padding style
}
让我们用插图来理解它。
示例
<!DOCTYPE html>
<html>
<head>
<title>
按钮背景色
</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>
输出
