弥散阴影幽灵按钮

这几年设计圈比较流行高饱和度渐变色和弥散阴影效果，弥散阴影有一个特点就是投影的颜色和物体颜色保持一致，下面来介绍运用css3实现的弥散阴影幽灵按钮，效果如下图所示。

弥散阴影幽灵按钮效果

第一步：

首先搭建结构。按钮整体用一个盒子div承载，设置类名为btns，每个按钮用a标签。弥散阴影和小箭头我们使用伪元素:before和:after去制作。

html:

<div class="btns">
    <a href="#">
        more
    </a>
    <a href="#">
        more
    </a>
   <a href="#">
        more
    </a>            
</div>

第二步：

书写css样式，实体化a标签作为按钮，添加渐变背景色。

弥散阴影使用伪元素:before实体化定位制作，注意背景颜色继承父元素，层级设置为-1在按钮的下方，添加filter:blur(5px)滤镜属性设置投影为高斯模糊并且调整定位坐标向下。

css:

<style>
  *{padding: 0; margin: 0; list-style: none;}
  /*设置整体居中和按钮分布*/
  .btns{
      width: 800px; 
      height: 60px; 
      margin: 100px auto; 
      display: flex; 
      justify-content: space-around;
  }
  /*实体化按钮*/
  .btns a{
      width: 130px; 
      height: 60px; 
      border-radius:10px; 
      color: #fff; 
      text-decoration: none; 
      text-align: center; 
      line-height: 60px; 
      font-size: 20px; 
      position: relative;
  }
  /*设置渐变背景色*/
  .btns a:nth-child(1){
      background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
   }
  .btns a:nth-child(2){
      background: linear-gradient(120deg, #00f2fe 0%, #4facfe 100%);
   }
  .btns a:nth-child(3){
      background: linear-gradient(120deg, #7579ff 0%, #b224ef 100%);
   }
  /*弥散阴影*/
  .btns a:before{
      content:""; 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      background:inherit; 
      filter: blur(5px); 
      left: 0; 
      top: 5px; 
      z-index: -1;
   }            
</style>

样式书写完毕，按钮的静态效果已经实现，如下图所示。

默认效果

第三步：

添加鼠标移上小箭头出现移动效果。

小箭头我们使用伪元素:after去制作。设置小箭头默认透明度opacity:0，鼠标移上设置透明度为1，显示小箭头，注意添加transition过渡会有淡入显示视觉效果。

鼠标移上a设置:after添加animation动画控制水平位移transform:translateX()。

css:

/*小箭头默认*/
.btns a:after{
    content:">"; 
    position: absolute; 
    transform: translateX(5px); 
    opacity: 0;
}
/*小箭头鼠标移上*/
.btns a:hover:after{
    /*淡入显示*/
    opacity: 1; 
    transition: 0.5s; 
    /*鼠标移上添加位移动画*/
    animation:yi 1.2s infinite;
}
@keyframes yi{
    0%{ transform: translateX(5px);}
    50%{transform: translateX(10px);}
    100%{transform: translateX(5px);}
}

添加小箭头后，鼠标移上效果如下图。

鼠标移上出现箭头

第四步：

添加线框滑动效果。这个效果需要在a标签内部添加四个span定位并实体化，背景颜色继承父元素，层级z-index设置为-1在按钮的下方，并且给线框设置四个不同方向的位移，把线框移动到按钮外面。

html:

<div class="btns">
    <a href="#">
        more
        <!--线框-->
        <span class="line left"></span>
        <span class="line down"></span>
        <span class="line right"></span>
        <span class="line up"></span>
    </a>
    <a href="#">
        more
        <!--线框-->
        <span class="line left"></span>
        <span class="line down"></span>
        <span class="line right"></span>
        <span class="line up"></span>
    </a>
    <a href="#">
        more
        <!--线框-->
        <span class="line left"></span>
        <span class="line down"></span>
        <span class="line right"></span>
        <span class="line up"></span>
    </a>            
</div>

css:

/*线框默认*/
.btns .line{
    position: absolute; 
    background:inherit; 
    z-index: -1;
}
/*实体化定位位移*/
/*左右线框*/
.btns .left,.btns .right{
    width:1px; 
    height:80%; 
    top:10%;
}
.btns .left{
    left:0; 
    transform: translate(0,138%);
}
.btns .right{
    right:0; 
    transform: translate(0,-138%);
}
/*上下线框*/
.btns .up,.btns .down{
    width:80%; 
    height:1px; 
    left:10%;
}
.btns .up{
    top:0; 
    transform: translate(-138%,0);
}
.btns .down{
    bottom:0; 
    transform: translate(138%,0);
}

线框实体化后效果如下图。

线框实体化

第五步：

设置线框初始不透明度为0，鼠标移上按钮a，把线框位移回原来的位置transform:translate(0,0)，并且把不透明的设置为1，添加过渡效果transition。

css:

/*线框默认*/
.btns .line{
   position: absolute; 
   background:inherit; 
   z-index: -1;
   /*初始不透明度*/
   opacity: 0;
   /*过渡*/
   transition:0.5s;
}
/*按钮鼠标移上控制线框*/
.btns a:hover .line{
   transform: translate(0,0);
   opacity: 1;
}

最终效果如下图。

最终效果