按钮（ buttons ）是交互式元素，允许用户在您的网站或应用程序上执行操作。按钮的形状通常是矩形或圆形的，并有一个文本标签，说明当您单击它们时会发生什么。
在浏览网页时，您可能会遇到各种交互式元素，例如提交按钮。在本文中，我们将介绍如何使用 CSS 设置按钮样式，探索不同类型的按钮，并讨论相关属性。
如何在CSS中设置按钮的样式？
- 设置尺寸：在 CSS 中，height 和 width 属性可用于调整网页中按钮的大小。
- 定义颜色和边框：与 UI 兼容的颜色和具有适当厚度的边框使按钮脱颖而出。background-color 和 border 属性可用于为 css 中的任何按钮设置颜色和边框。
- 阴影效果：使用 box-shadow 属性在按钮周围添加阴影效果可增强按钮样式。
- 悬停效果：当用户将鼠标悬停在按钮上时，悬停效果等交互式样式会更改按钮的样式。这可能包括不透明度、大小（使用转换）等的变化。
- 动画按钮：CSS 动画可用于创建动态交互式按钮。
设置按钮颜色
如上所述，我们可以在 CSS 中使用 background-color 属性为按钮提供正确的颜色。查看示例
例在此示例中，我们使用具有不同颜色的样式按钮，这些按钮与背景颜色的UI匹配。
<!DOCTYPE html>
<html>
<head>
<style>
body{
background: black;
padding: 40px;
}
button {
padding: 20px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button style="background: #FFD700">
Yellow Button
</button>
<button style="background: #00FFFF">
Blue Button
</button>
<button style="background: #FFFFFF">
White Button
</button>
<button style="background: #FF4500">
Orange Button
</button>
<button style="background: #32CD32">
Lime Button
</button>
</body>
</html>设置按钮边框
边框是按钮边缘周围的空间。我们可以使用 border 属性来设置按钮边框的样式。
border 属性采用边框的厚度、类型和颜色三个值。
例下面是一个示例，说明如何使用
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 12px;
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
}
.style1 {
border: 3px solid darkred;
}
.style2 {
border: 3px solid gold;
}
.style3 {
border: 3px solid black;
}
</style>
</head>
<body>
<button class="style1">
darkred border
</button>
<button class="style2">
gold border
</button>
<button class="style3">
black border
</button>
</body>
</html>创建圆角按钮
我们可以使用 border-radius 属性创建圆角按钮或完全圆形按钮。
/* Round cornered button */
border-radius: 10px;
/* Circular button */
border-radius: 50%;例
以下是如何创建圆角按钮的示例。
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 12px;
padding: 10px;
margin: 5px;
}
.style1 {
border-radius: 10px;
background-color: violet;
}
.style2 {
border-radius: 20px;
background-color: pink;
}
.style3 {
border-radius: 50%;
background-color: violet;
}
</style>
</head>
<body>
<button class="style1">
Border-radius: 10px;
</button>
<button class="style2">
Border-radius: 20px;
</button>
<button class="style3">
Circle
</button>
</body>
</html>按钮悬停效果
将鼠标指针移动到按钮上方而不单击它称为悬停。我们可以使用 ：hover 伪类来设置按钮的悬停状态样式。
button:hover{
property: value;
} 例
下面是创建按钮悬停效果的示例。
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 12px;
padding: 10px;
margin: 5px;
background-color: #1156b3; /* Darker blue */
}
.style1:hover {
background-color: #0069d9; /* Slightly darker blue */
}
.style2:hover {
transform: scale(1.2); /* Size increase effect */
}
.style3:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<button class="style1">
Button 1
</button>
<button class="style2">
Button 2
</button>
<button class="style3">
Button 3
</button>
</body>
</html>按钮焦点和主动样式
按钮的焦点状态是按钮聚焦时的状态，通常是在被单击或按 Tab 键进入之后。按钮的活动状态是单击按钮时的状态。我们可以使用伪类 ：focus 和 ：active 来设置这些状态的样式
button:focus {
property: value;
}
button:active {
property: value;
}例
下面是按钮的焦点状态和活动状态示例。
<!DOCTYPE html>
<html>
<head>
<style>
.style-button {
display: inline-block;
padding: 15px;
background-color: pink;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
.style-button:hover {
background-color: violet;
}
.style-button:focus {
outline: none;
box-shadow: 0 0 5px 2px blue;
}
.style-button:active {
transform: translateY(2px);
background-color: yellow;
}
</style>
</head>
<body>
<button class="style-button">Press Me</button>
</body>
</html>在按钮上设置阴影效果
在 CSS 中，box-shadow 属性用于在按钮周围添加阴影效果。
框阴影由相对于元素的水平和垂直偏移、模糊和展开半径以及颜色来描述。以下是 box-shadow 的语法：
button {
box-shadow: inset horizontal vertical
blur-radius spread-color;
}例
下面是如何创建带有投影的按钮的示例。
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 12px;
padding: 10px;
margin: 5px;
}
.style1 {
background-color: pink;
box-shadow: 0 5px 10px 0 red;
}
.style2 {
background-color: yellow;
}
.style3:hover {
background-color: yellow;
box-shadow: 0 5px 10px 0 orange;
}
</style>
</head>
<body>
<button class="style1">
Button 1
</button>
<button class="style2">
Button 2
</button>
<button class="style3">
Button 3
</button>
</body>
</html>禁用的按钮
禁用的按钮是不可单击的按钮。当满足某些条件时，可以使用 JavaScript 启用此按钮。
我们可以通过将 cursor 属性设置为 not-allowed 来创建一个禁用按钮。
例下面是一个示例。
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 12px;
padding: 10px;
margin: 5px;
}
.style1 {
background-color: pink;
cursor: pointer;
}
.style2 {
background-color: yellow;
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="style1">
Normal Button
</button>
<button class="style2">
Disabled Button
</button>
</body>
</html>设置按钮宽度
我们可以使用 width 属性定义按钮的水平宽度。
例下面是如何创建具有不同宽度的按钮的示例。
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 12px;
padding: 10px;
margin: 5px;
}
.style1 {
background-color: pink;
width: 200px;
}
.style2 {
background-color: violet;
width: 50%;
}
.style3 {
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<button class="style1">
width 100px
</button><br>
<button class="style2">
width 50%
</button><br>
<button class="style3">
width 100%
</button><br>
</body>
</html>CSS 按钮组
以下示例演示了如何通过删除边距并向每个按钮添加 float： left 属性来创建水平按钮组。
例
<!DOCTYPE html>
<html>
<head>
<style>
.button-group {
display: flex;
justify-content: center;
float: left;
}
.style-button {
background-color: yellow;
border: none;
padding: 10px 20px;
float: left;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.style-button:hover {
background-color: orange;
}
</style>
</head>
<body>
<div class="button-group">
<button class="style-button">Submit</button>
<button class="style-button">Cancel</button>
<button class="style-button">Reset</button>
</div>
</body>
</html>CSS 垂直按钮组
下面是一个示例，说明如何通过设置 display： block 和 float： left 属性来创建垂直按钮组
例
<!DOCTYPE html>
<html>
<head>
<style>
.button-group {
justify-content: center;
float: left;
}
.style-button {
background-color: yellow;
border: 2px solid orange;
padding: 10px 20px;
text-align: center;
display: block;
text-decoration: none;
font-size: 16px;
width: 100px;
}
.style-button:hover {
background-color: violet;
}
</style>
</head>
<body>
<div class="button-group">
<button class="style-button">Home</button>
<button class="style-button">Blog</button>
<button class="style-button">Setting</button>
</div>
</body>
</html>图像上的 CSS 按钮
下面是一个示例，说明如何使用相对定位将按钮叠加在图像顶部
例
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
display: inline-block;
}
img {
width: 300px;
height: 200px;
}
button {
position: absolute;
top: 40%;
left: 30%;
background-color: yellow;
border: none;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
button:hover {
background-color: orange;
}
</style>
</head>
<body>
<div class="image-container">
<img src="/css/images/tree.jpg" alt="Your Image">
<button>Click Me</button>
</div>
</body>
</html>CSS 动画按钮
在CSS中，我们可以使用伪元素来动画按钮点击效果。
例下面是如何在按钮上创建动画效果的示例
<!DOCTYPE html>
<html>
<head>
<style>
button {
display: inline-block;
padding: 15px;
background-color: violet;
border: none;
text-align: center;
text-decoration: none;
font-size: 20px;
cursor: pointer;
position: relative;
overflow: hidden;
}
button::before {
content:"";
position: absolute;
width: 0;
height: 100%;
top: 0;
left: 0;
background-color: pink;
transition: width 0.3s ease-in-out;
}
button:hover::before {
width: 100%;
}
.icon::after {
content: '\2192';
margin-left: 10px;
}
</style>
</head>
<body>
<button>
Hover Me <span class="icon"></span>
</button>
</body>
</html>