用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果

用css实现边框的动态渐变色效果，希望对各位能有一些帮助。

边框.html 

  
    
    
    
    
    
  
  
    
鼠标移入此处，边框变色
  

动态边框.css

    /* 初始状态，注意设置相对定位 */
    div {
      width: 300px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      box-sizing: border-box;
      position: relative;
    }
    /* 渐变色边框 */
    div::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      border-top: 1px solid;
      border-left: 1px solid;
      border-image: linear-gradient(to bottom, #eda901, #d16cc7) 1 10;
      width: 0;
      height: 0;
      transition: all 0.4s ease-out 0s;
      visibility: hidden;
      box-sizing: border-box;
    }
    div::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      border-right: 1px solid;
      border-bottom: 1px solid;
      border-image: linear-gradient(to bottom, #eda901, #d16cc7) 1 10;
      width: 0;
      height: 0;
      transition: all 0.4s ease-out 0s;
      visibility: hidden;
      box-sizing: border-box;
    }
    div:hover::before {
      width: 100%;
      height: 100%;
      visibility: visible;
    }
    div:hover::after {
      width: 100%;
      height: 100%;
      visibility: visible;
    }

 其实就是又在原本的div上又加了一层图层，会有边框的动态效果，如果原本的div内有想要点击的按钮，可以给需要点击的按钮再添加一个相对定位position: relative;然后给z-index属性高一点就行了。

                     这是原本的样子：

 这是鼠标移入后的样子：

 中间还会有个边框逐渐产生的效果，不过我没弄gif图，凑合着看吧。