上查看所有课程
按钮是可点击的元素，在按下时执行某些操作。例如，
上面的示例展示了默认按钮和带有 CSS 样式的按钮。
创建按钮
按钮使用 <button> 元素创建。例如，
<button>button</button>浏览器输出
在这里，默认按钮在没有任何样式的情况下看起来不太好。
样式化按钮
我们可以使用以下属性来样式化按钮：
-
background-color：更改按钮的背景颜色 padding：为按钮添加内边距width：设置按钮的宽度border：为按钮指定边框border-radius：使按钮的角变圆box-shadow：为按钮添加阴影效果
我们来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS buttons</title>
</head>
<body>
<button class="button">Submit</button>
</body>
</html>.button {
background-color: purple;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: monospace;
color: white;
padding: 20px;
margin-left: 10px;
text-align: center;
cursor: pointer;
}浏览器输出
在上面的例子中：
-
background-color: purple为按钮背景添加purple颜色 -
border-radius: 5px使按钮的角以5px的半径变圆 font-weight: bold使按钮文本加粗-
font-size: 18px将字体大小设置为18px -
font-family: monospace:定义按钮文本的字体家族 color: white将文本颜色设置为white-
padding: 20px为按钮添加20px的内边距 -
text-align: center使按钮文本居中对齐 -
cursor: pointer在按钮悬停时将光标更改为指针
样式化按钮状态
按钮有三种不同的状态，分别是：
- 悬停 (Hover)
- 焦点 (Focus)
- 活动 (Active)
让我们详细了解它们。
样式化悬停状态
悬停状态在用户将光标放在元素上时触发。
:hover 伪类选择器用于添加悬停状态的样式。
让我们看一个例子，
.button:hover{
background-color: red;
}浏览器输出
在这里，按钮悬停时背景颜色从 purple 变为 red。
注意：transition 属性在按钮悬停时创建平滑的样式过渡。
样式化焦点状态
focus 状态在元素获得键盘焦点时触发。
:focus 伪类选择器用于添加焦点状态的样式。
按钮使用键盘上的 Tab 键获得焦点。
让我们看一个例子，
.button:focus {
background-color: red;
}浏览器输出
在这里，按钮获得焦点时背景颜色从 purple 变为 red。
样式化活动状态
活动状态在用户积极与元素交互时触发。
:active 伪类选择器用于添加活动状态的样式。
让我们看一个例子，
.button:active {
background-color: red;
}浏览器输出
在这里，按钮被点击时背景颜色变为 red。
阴影按钮
box-shadow 属性用于为按钮添加阴影。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS shadow button</title>
</head>
<body>
<button class="button1">Normal Button</button>
<button class="button2">Shadowed Button</button>
</body>
</html>/* styles both buttons */
.button1, .button2 {
background-color: purple;
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
padding: 20px;
margin-left: 10px;
text-align: center;
cursor: pointer;
}
/* adds shadow effect to button2 on hover*/
.button2:hover {
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.74);
}浏览器输出
在上面的例子中：
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.74);当鼠标悬停在按钮上时，会在按钮周围创建阴影。
禁用按钮
可以使用 opacity 属性创建禁用按钮。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS disabled button</title>
</head>
<body>
<button class="button1">Normal Button</button>
<button class="button2">Disabled Button</button>
</body>
</html>.button1, .button2 {
background-color: purple;
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
padding: 20px;
margin-left: 10px;
text-align: center;
cursor: pointer;
}
/* disables button2 on hover*/
.button2:hover {
opacity: 0.4;
cursor: not-allowed;
}浏览器输出
上面的示例显示了两个按钮：正常和禁用。
注意：cursor 属性允许在悬停元素时添加不同类型的光标。
动画按钮
我们可以为按钮添加不同的动画效果，以增强用户体验。例如，
/* adds animation effect to button2 on hover*/
.button2:hover {
bottom: 12px;
}浏览器输出
上面的示例显示了一个普通按钮和一个动画按钮。
CSS 按钮示例
我们来看各种样式化按钮的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Button Styling</title>
</head>
<body>
<button class="button button1">Button 1</button>
<button class="button button2">Button 2</button>
<button class="button button3">Button 3</button>
<button class="button button4">Button 4</button>
<button class="button button5">Button 5</button>
</body>
</html>.button {
color: white;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 10px;
padding: 12px 18px;
border-radius: 4px;
}
.button1 {
background-color: purple;
}
.button1:hover {
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.44);
}
.button2 {
color: black;
border: 1px solid black;
transition: all 0.4s ease;
}
.button2:hover {
background-color: red;
color: white;
}
.button3 {
background-color: red;
transition: transform 0.5s ease;
}
.button3:hover {
transform: translateY(-5px);
color: black;
}
.button4 {
border-radius: 0px;
background-color: black;
transition: all 0.4s ease;
border: 1px solid black;
}
.button4:hover {
background-color: white;
color: black;
}
.button5 {
background: linear-gradient(to right, orange, red);
transform: all 0.3s ease;
}
.button5:hover {
background: linear-gradient(to right, red, orange);
}
.button:active {
color: black;
}浏览器输出
上面的示例展示了不同 CSS 样式设计的按钮。