likes
comments
collection
share

手把手教你：如何实现悬停霓虹灯按钮

作者站长头像
站长
· 阅读数 78

前言

按钮这个控件是经常能在各式各样的网页上看到的，直接使用button标签就能实现一个按钮。原生按钮效果如下所示：

手把手教你：如何实现悬停霓虹灯按钮

那么给button添加什么样式，能使得按钮变得更丰富炫酷呢？这个炫酷按钮的效果如下所示：

手把手教你：如何实现悬停霓虹灯按钮

  • 代码块

实现思路

效果上面展示了，现在来讲讲实现过程。首先我们抛去传统的button标签，使用a标签来定义按钮。通过这种方式可以更自由的设计自己想要的样式。

<body>
    <a href="">BUTTON</a>
    <a href="">BUTTON</a>
</body>

然后开始设计样式。首先把a标签里不要的东西去除掉，因为a是作为按钮存在的，所以给它设置好基本的样式很重要。

a{
    position: relative;
    padding: 10px 30px;
    margin: 50px 0;
    color: skyblue;
    text-decoration: none;
    font-size: 20px;
    transition: 0.1s;
    overflow: hidden;
}

transition以及用过很多次了，就是过渡属性。

然后开始设计当鼠标移动到按钮时样式发生改变，这时候就需要用到hover选择器了。hover选择器用于选择鼠标指针浮动在上面的元素。有些人对它会有误解，认为它只能作用在链接上，其实hover选择器可用于所有元素，不仅仅是链接。

a:hover{
    background: skyblue;
    color: #111;
    box-shadow: 0 0 50px skyblue;
    transition-delay: 0.1s;
    border-radius: 20px;
}

当然，如果要实现炫酷的霓虹灯效果的话，仅靠这个是不够的，还需要after和before伪元素的协助。在这里伪元素的作用是添加border边框，如下红圈所示一般：

a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid skyblue;
    border-left: 2px solid skyblue;
    transition: 0.1s;
    transition-delay: 0.1s;
}
a::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid skyblue;
    border-right: 2px solid skyblue;
    transition: 0.1s;
    transition-delay: 0.1s;
}

hover选择器和伪元素都布置好后，剩下来就是将它们结合在一起使用了，意思就是当鼠标移动到a标签时，能添加已定义好的伪元素

a:hover::before{
    width: 100%;
    height: 100%;
    transition-delay: 0s;
}
a:hover::after{
    width: 100%;
    height: 100%;
    transition-delay: 0s;
}

transition-delay规定过渡从什么时候开始，在这里也可以选择不添加这条属性，效果也是一样的。

代码块总览

手把手教你：如何实现悬停霓虹灯按钮

总结

css很神奇，用它能完成很多炫酷的效果，比如这个炫酷的按钮。所以大家可以多多尝试，发现css的美。

转载自:https://juejin.cn/post/7145408061900292126
评论
请登录