• 注册
  • 生活 生活 关注:1 内容:286

    简单炫酷css 流光按钮

  • 查看作者
  • 打赏作者
    • 生活
    • 4
      普通会员
      官方

      简单炫酷css 流光按钮

      <style>
        .btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 230px;
          height: 90px;
          line-height: 90px;
          text-align: center;
          color: #fff;
          font-size: 25px;
          text-transform: uppercase;
          cursor: pointer;
          background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
          background-size: 400%;
          border-radius: 60px;
        }
       
        .btn:hover {
          animation: animate 8s linear infinite;
        }
       
        @keyframes animate {
          0% {
            background-position: 0%;
          }
       
          100% {
            background-position: 400%;
          }
        }
       
        .btn::before {
          content: '';
          position: absolute;
          top: -5px;
          left: -5px;
          right: -5px;
          bottom: -5px;
          z-index: -1;
          background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
          background-size: 400%;
          border-radius: 40px;
          opacity: 0;
          transition: 0.5s;
        }
       
        .btn:hover::before {
          filter: blur(20px);
          opacity: 1;
          animation: animate 8s linear infinite;
        }
      </style>
       
      <body>
        <b href="#" class="btn">button</b>
      </body>

      请登录之后再进行评论

      登录
      自助推广购买
    • 分享给朋友

    • 发表内容
    • 做任务
    • 客服
    • 还没有账号?点这里立即注册