效果展示

大家好，这里是初心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：荧光按钮效果