本文将指导你如何使用 CSS 创建一个具有动态边框效果的按钮，该效果类似于beedie.ca网站上的按钮动画。我们将详细解释实现原理，并提供完整的代码示例，帮助你轻松掌握这种交互效果的制作方法。核心在于利用::before和::after伪元素，配合transition属性，控制边框的显示和隐藏，从而实现动画效果。
实现原理
实现这种按钮动画的关键在于使用CSS的::before和::after伪元素。这两个伪元素允许我们在元素的内容之前和之后插入内容，而无需修改HTML结构。
- 创建伪元素： 使用::before和::after创建两个覆盖按钮的伪元素。
- 设置初始状态： 将伪元素的宽高设置为0，并设置边框颜色为透明，使其初始状态不可见。
- 定义hover状态： 当鼠标悬停在按钮上时，改变伪元素的宽高，使其从0变为100%，同时改变边框颜色，使其可见。
- 添加过渡效果： 使用transition属性，为伪元素的宽高变化和边框颜色变化添加过渡效果，使其动画更加平滑。
代码实现
以下是实现按钮边框动画的完整代码示例：
HTML:
立即学习“前端免费学习笔记（深入）”；
CSS:
.button {
background: none;
border: 0;
box-sizing: border-box;
padding: 0.9rem 2rem;
box-shadow: inset 0 0 0 1px #fff;
color: #000000;
text-transform: uppercase;
font-family: "ff-meta-web-pro","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
font-weight: 400;
letter-spacing: 0.025em;
position: relative;
vertical-align: middle;
transition: color 0.25s;
display: inline-block;
text-decoration: none;
}
.button::before {
top: 0;
left: 0;
}
.button::before, .button::after {
box-sizing: inherit;
content: "";
position: absolute;
width: 0;
height: 0;
border: 1px solid transparent;
}
.button::after {
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.button:hover {
outline-width: 0;
text-decoration: none;
}
.button:hover::before {
border-top-color: #0076b6;
border-right-color: #0076b6;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.hover-effect-button-container-yellow {
padding: 10px;
background: pink;
}
.button:hover::before, .button:hover::after {
width: 100%;
height: 100%;
}
.button:hover::after {
border-bottom-color: #0076b6;
border-left-color: #0076b6;
transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}代码解释：
- .button：定义按钮的基本样式，包括背景、边框、颜色、字体等。
- .button::before, .button::after：定义伪元素的公共样式，包括定位、尺寸、边框等。
- .button:hover::before：定义鼠标悬停时，::before伪元素的样式，改变边框颜色和过渡效果。
- .button:hover::after：定义鼠标悬停时，::after伪元素的样式，改变边框颜色和过渡效果。
注意事项
- 确保为按钮添加position: relative;，以便伪元素可以相对于按钮进行定位。
- 可以根据需要调整过渡效果的时间和缓动函数，以获得不同的动画效果。
- 可以修改边框颜色和粗细，以及背景颜色，以适应不同的设计风格。
- 考虑到可访问性，确保按钮的文本内容具有足够的对比度，以便用户可以清晰地阅读。
总结
通过使用CSS的::before和::after伪元素，我们可以轻松地创建出各种各样的按钮动画效果。 这种方法不仅简单易用，而且可以有效地提升用户体验。 掌握这种技巧，可以为你的网站或应用程序添加更多的交互性和视觉吸引力。 记得根据实际需求调整样式，创造出独一无二的按钮动画效果。
