介绍
对于网页设计师和开发人员而言，创建易于使用和易于阅读的 UI 元素至关重要。为按钮添加彩色边框是一种可以增强网页设计的方法。在本文中，我们将学习如何使用 CSS 实现这一效果。
基本要素
在添加彩色边框之前，我们需要确保在按钮上使用了基本 CSS 属性，以使其呈现合适的样式。以下是必要的 CSS 属性列表：
1. 宽度和高度
默认情况下，按钮的尺寸由其内容决定。但是，我们希望所有的按钮都具有相同的尺寸。所以我们需要指定宽度和高度属性：
button {
width: 120px;
height: 40px;
}
这里我们将宽度设置为120像素，高度为40像素。
2. 文本对齐
按钮通常包含一个标签，因此我们需要确保按钮中的文本内容与我们所期望的一样居中对齐:
button {
text-align: center;
line-height: 40px;
}
我们将文本水平居中对齐，并通过line-height属性使文本垂直居中。
3. 字体大小、颜色等文本相关属性
我们也可以调整字体大小、颜色以及其他与文本相关的属性。例如：
button {
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
}
让我们创建一个基本的按钮样式。
button {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
background: #4CAF50;
border: none;
border-radius: 5px;
outline: none;
}
该按钮的背景颜色是绿色，没有边框，圆角半径为5像素。
在按钮上添加彩色边框
现在我们已经创建了我们的基本按钮，我们可以让它显得更加醒目，并在悬停时添加动画效果。
我们可以使用 CSS 的:hover 伪类选择器来定义鼠标悬停时应用的样式:
button:hover {
border: 2px solid #4CAF50;
}
该代码将为按钮添加2像素宽度的绿色实线边框。
我们还可以添加动画效果来使按钮的变化更加明显:
button {
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
button:hover {
border: 2px solid #4CAF50;
transform: scale(1.05);
}
这段代码使用了CSS过渡效果和:hover伪类选择器。当鼠标悬停在按钮上时，我们将添加2像素宽度的绿色实线边框，同时使用transform属性使按钮放大1.05倍。
完整代码：
button {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
background: #4CAF50;
border: none;
border-radius: 5px;
outline: none;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}
button:hover {
border: 2px solid #4CAF50;
transform: scale(1.05);
}
结论
在本文中，我们介绍了如何使用 CSS 在按钮上添加彩色边框。我们可以使用:hover伪类选择器定义鼠标悬停时应用的样式，并添加动画效果以增加醒目度。这种彩色边框可以使按钮更加醒目，使用户更容易识别并使用。