我正在参与「码上挑战赛」概略请看：码上挑战赛来了！

前语

按钮这个控件是常常能在各式各样的网页上看到的，直接运用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的美。