css3按钮效果_超酷的css3按钮鼠标经过特效

代码2023-01-1075 人已阅来源:网络

今天分享一个超酷的css3按钮鼠标经过特效,相信对大家对css3的学习和理解会有不小的帮助。

具体请查看以下示例:

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aihongxin.com</title>
</head>
<style>
  body{
    text-align: center;
    padding: 10% 0;
  }
  a{
    width: 240px;
    height: 66px;
    line-height: 66px;
    text-align: center;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    position: relative;
    display: block;
    z-index: 1;
    margin: 0 auto;
  }
  a::before{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    background-color: #20a0ff;
    background-image: radial-gradient(circle farthest-corner at 100% 0,#f09c33 0,#f59234 4%,#f98736 7%,#fd7b38 10%,#ff6e3c 14%,#ff5f41 18%,#ff4e46 21%,#ff384b 25%,#fd1851 29%,#f90059 32%,#f50062 36%,#f0006c 39%,#e90077 43%,#e10083 46%,#d70090 50%,#20a0ff 75%,#20a0ff 100%);
    background-position: 0 0;
    background-size: 400% 100%;
    border-radius: inherit;
    transition: background-position 1s cubic-bezier(.35,.35,0,1);
  }
  a::after{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 4rem;
    height: 100%;
    content: "";
    background: linear-gradient(90deg,rgba(255,243,225,0),#fff3e1);
    opacity: 0;
  }
  a:hover::before{
    background-position: 85%;
  }
  a:hover::after{
    animation: aihongxin .85s cubic-bezier(.65,0,.35,1) .15s;
  }
  @-webkit-keyframes aihongxin {
      0% {
          opacity: 0;
          transform: translate3d(-4rem,0,0) skewX(45deg)
      }
      50% {
          opacity: .15
      }
      to {
          opacity: 0;
          transform: translate3d(4rem,0,0) skewX(45deg)
      }
  }
</style>
<body>
  <a href="">爱红心</a>
</body>
</html>