CSS太牛了！流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果

如你看到的标题所见，这绝对是一个非常酷炫非常惊艳的按钮效果，先看效果图：

虽然GIF动画质量有些失真，但不难看出这几个按钮的效果还是非常赞的！下面我们就来看看这个效果是如何实现的。

页面布局代码非常简单：

<button class="btn btn-gradient">我是一个华丽的按钮</button> 

从这行代码可以看出，button按钮一共有有两个class类名。

第一个类名：btn，这个类名用来创建按钮的基本样式。

.btn {
  position: relative;
  padding: 1rem 3rem;
  font-family: "微软雅黑", sans-serif;
  font-size: 1.5rem;
  font-weight:700;
  line-height: 1.5;
  color: black;
  text-decoration: none;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3);
  background-color: white;
  border: transparent;
  outline: transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  animation: glow 8s linear infinite;
}

第二个类名：btn-gradient ，用来表现 按钮的动画样式。

.btn-gradient {
  color: white;
  background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
  background-size: 300%;
  border-radius: 2em;
}
.btn-gradient::before {
  position: absolute;
  content: "";
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
  background: inherit;
  background-size: inherit;
  border-radius: 4em;
  opacity: 0;
  transition: 0.5s;
}
.btn-gradient:hover{
  coloer:#ececec;
  
}
.btn-gradient:hover::before {
  opacity: 1;
  filter: blur(20px);
  animation: glow 8s linear infinite;
}

@keyframes glow { /* 背景色变化效果 */
  to {
    background-position: 300%;
  }
}

通过对btn-gradient类的 before 和 hover 样式，为按钮增加丰富的变化和鼠标移动到按钮上时表现的光晕效果。

接下来的三个按钮就简单了，接下来要做的，仅仅是调整颜色，并且将调整好的样子增加到button上。具体如下：

<button class="btn btn-gradient">我是一个华丽的按钮</button> 
<button class="btn btn-gradient golden">我是一个奢华的按钮</button>   
<button class="btn btn-gradient shine">我是一个热情的按钮</button>  
<button class="btn btn-gradient black">我是一个沉稳的按钮</button> 

接下来我们写样式表，新增三种颜色渐变。

.golden{
  color: #504227;
  background-image: linear-gradient(to right, #fff89b,  #997744, #fff89b, #997744, #fff89b);
}

.shine{ 
  background-image: linear-gradient(to right, red, gold, lightgreen, gold, red);
}

.black{
  background-image: linear-gradient(to right,  #252525,#393e40,#4f4f4f,#6d6d6d, #252525);
}

到这里，四个炫彩按钮就这样完成了。点击下载本文《流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果》完整源码。

您的鼓励，是我继续发文的动力。如果您觉得我的文章对您有所帮助，欢迎您评论，点赞和收藏。