效果展示
大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现一个简单精美的 css 效果。
那么下面我们直接进入正题，先来看看今天的效果展示吧：
关键点
本效果有以下几个关键点：
- 未激活状态下，按钮左右两侧的“刺”
- 从未激活状态到激活状态的过渡
- 激活状态下，按钮的荧光效果
- 倒影效果
而在上述关键点中，后两点都在前面的文章中已经提过如何实现，感兴趣的读者可以看看这里。
那么本文的重点就是前两点，下面依次分析实现。
具体实现
左右两侧的“刺”
首先把按钮的基本骨架做出来，没什么好说的，效果如下：
我们知道，要给一个元素添加一些修饰的东西，通常都是利用伪类结合绝对定位来做，这里可以借助伪类实现。
那么需要实现的就有两点：
- 左右两边的主“刺”，这个没什么好说，直接讲伪类定位到对应位置即可
- 主“刺”上下的两根小“刺”，最笨的办法可以再通过定位的办法将对应元素定位过去，但这里有一个小技巧：可以借助
box-shadow，将主“刺”投影到上下两处即可
代码如下：
a::before,
a::after {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 2px;
background: var(--theme-color);
}
a::befor {
left: -20px;
box-shadow: 5px -8px 0 var(--theme-color), 5px 8px 0 var(--theme-color);
}
a::after {
right: -20px;
box-shadow: -5px -8px 0 var(--theme-color), -5px 8px 0 var(--theme-color);
}
效果如下：
过渡状态
仔细分析整个过渡状态，我们可以知道，具体步骤如下：
- “刺”的宽度变化
- “刺”的位置变化
- “刺”的高度变化
- 按钮变成荧光状态，同时按钮文字颜色变化
显然，这里需要灵活的运用 transition-delay，首先设置目标状态：
a:hover::before,
a:hover::after {
width: 60%;
height: 100%;
}
a:hover::before {
left: 0;
}
a:hover::after{
right: 0;
}
随后就是设置它们的 transition-delay：
a::before {
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
a::after {
transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
效果如下：
可见上述效果和最终效果相去甚远，具体有以下几点需要改正：
transition-delay应该设置在hover中，并且hover之外的transition-delay应该设置成从激活状态到未激活状态的步骤- 文字应该在按钮之上，用
z-index即可 - 激活状态下超出了按钮的范围，应该将
box-shadow的y轴恢复
那么修改一下代码：
a span {
position: relative;
z-index: 10;
}
a::before {
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
a:hover::before {
box-shadow: 5px 0 0 var(--theme-color), 5px 0 0 var(--theme-color);
transition-delay: 0s, 0.5s, 1s, 1s;
}
a::after {
transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
transition-delay: 1s, 0.5s, 0s, 0s;
}
a:hover::after {
box-shadow: -5px 0 0 var(--theme-color), -5px 0 0 var(--theme-color);
transition-delay: 0s, 0.5s, 1s, 1s;
}
效果如下：
最后就没什么好说的了，添加荧光效果和倒影效果即可，感兴趣的读者可以看看在线 demo：荧光按钮效果
