📅 最后修改于: 2023-12-03 15:37:49.379000 🧑 作者: Mango
按钮是网页中常用的交互元素，通过 CSS 可以实现各种样式的按钮，本文将介绍基础 CSS 按钮制作方法并提供示例代码。
在 HTML 中，我们可以使用 button 元素创建按钮。例如：
<button>Click me</button>
这将创建一个带有默认样式的按钮，点击后没有任何响应。
通过 CSS 可以为按钮添加各种样式。常用的样式包括背景色、字体大小、圆角、边框等。
button {
background-color: #4299e1;
color: #fff;
font-size: 1.2rem;
padding: 0.5em 1em;
border: none;
}
以上样式为按钮添加了背景色、字体颜色、字体大小、内边距和去除边框。点击按钮会有默认的阴影效果。这个按钮看起来很好看，但是它缺少交互效果。
我们可以使用 :hover 伪类选择器为按钮添加悬停效果。例如：
button:hover {
background-color: #3182ce;
}
鼠标悬停在按钮上时，按钮背景色会变成深蓝色。
为按钮添加点击效果，可以使用 :active 伪类选择器。例如：
button:active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
这将在按钮被点击时添加一个浅阴影效果。完整代码如下：
button {
background-color: #4299e1;
color: #fff;
font-size: 1.2rem;
padding: 0.5em 1em;
border: none;
}
button:hover {
background-color: #3182ce;
}
button:active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
以下是一个完整的按钮样式示例代码：
button {
background-color: #4299e1;
color: #fff;
font-size: 1.2rem;
padding: 0.5em 1em;
border: none;
}
button:hover {
background-color: #3182ce;
}
button:active {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
可以将上述代码添加到 HTML 文件的 <head> 元素内或者外部的 CSS 文件中。通过在 HTML 中添加 <button> 元素，即可应用这些样式。
CSS 可以轻松实现按钮样式，通过添加 :hover 和 :active 伪类选择器，我们可以为按钮添加交互效果。熟练掌握 CSS 中按钮样式的制作方法，可以让网页更加美观和易用。