CSS 鼠标悬停按钮效果

最新推荐文章于 2024-06-01 19:28:30 发布

沐马972

最新推荐文章于 2024-06-01 19:28:30 发布

阅读量2.9k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_66918384/article/details/126103262

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现效果

html

 <button>
  <a href="#">Button</a>
 </button>

css

    *,
    *::after,
    *::before{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      width: 100%;
      min-height: 100vh;
      color: #efe;
      background: #182848;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    button{
      border: none;
      position: relative;
      border-radius: 10px;
      /* 鼠标改成小手 */
      cursor: pointer;
      background: #182848;
      padding: 2em 4em;
      font-family: sans-serif;

    }
    a{
      text-decoration: none;
      /* 作用是把一个值限制在一个上限和下限之间 */
      font-size: clamp(1.5rem,2.5vw,2.5rem);
      /* 渐变 */
      background: linear-gradient(-45deg,#ff00c1,#00fff9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    button::after,
    button::before{
      content: '';
      position: absolute;
      background: linear-gradient(
        var(--rotate),
        #ff00c1 0%,
        #9600ff 25%,
        #4900ff 50%,
        #00b8ff 80%,
        #00fff9 100%
      );
      width: 105%;
      height: 110%;
      left:-2.5%;
      top:-5%;
      border-radius: 10px;
      z-index: -1;
      transition: --rotate 9999s linear;


    }
    button:hover::after,
    button:hover::before{
      --rotate:3600deg;
      transition: --rotate 20S linear;
    }
    button:hover::before{
      animation: fade 1.2s;
    }
    /* 允许开发者显式地定义他们的css 自定义属性 */
@property --rotate{
  syntax:"<angle>";
    initial-value:130deg;
    inherits:false;

}
@keyframes fade{
  0%{
    opacity: 1;
    transform: scale((1));
    filter:blur(10px);
  }
  100%{
    opacity: 0;
    transform: scale((1.4));
    filter:blur(10px);
  }
}