使用CSS实现按钮边框动画效果-小浪学习网

使用CSS实现按钮边框动画效果

本文将指导你如何使用 css 创建一个具有动态边框效果的按钮，该效果类似于beedie.ca网站上的按钮动画。我们将详细解释实现原理，并提供完整的代码示例，帮助你轻松掌握这种交互效果的制作方法。核心在于利用::before和::after伪元素，配合transition属性，控制边框的显示和隐藏，从而实现动画效果。

实现原理

实现这种按钮动画的关键在于使用CSS的::before和::after伪元素。这两个伪元素允许我们在元素的内容之前和之后插入内容，而无需修改html结构。

创建伪元素： 使用::before和::after创建两个覆盖按钮的伪元素。
设置初始状态： 将伪元素的宽高设置为0，并设置边框颜色为透明，使其初始状态不可见。
定义hover状态： 当鼠标悬停在按钮上时，改变伪元素的宽高，使其从0变为100%，同时改变边框颜色，使其可见。
添加过渡效果： 使用transition属性，为伪元素的宽高变化和边框颜色变化添加过渡效果，使其动画更加平滑。

代码实现

以下是实现按钮边框动画的完整代码示例：

HTML:

<div class="hover-effect-button-container-yellow">    <div class="hover-effect-button-yellow">        <a class="button" href="https://beedie.ca/industrial/">Learn More</a>    </div> </div>

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; }

代码解释：