多种按钮风格

按钮风格1

<div class="button1">
    <span>立即下载</span>
</div>

<style>
.button1 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    animation: zoomIn 1.5s infinite;  /* */
    text-align: center;
}
@keyframes zoomIn {
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
} 
</style>

立即下载

按钮2

 

        <div class="btn">Button Hover
            <div class="btn2">
            </div>          
          </div>

          <style>
          body {   //这段代码，将按钮置于中间，可删除
              align-items: center;
              background: #ffffff;
              display: flex;
              width: 100vw;
              height: 100vh;
              font-family: sans-serif;
              justify-content: center;
            }
          
           .btn,
           .btn2 {
              color: rgba(255,255,255,0.9);
              border-radius: 50px;
              width: 300px;
              height: 100px;
              font-size: 30px;
              text-align: center;
              line-height: 100px;
              background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
              background-size: 600%;
              -webkit-animation: anime 6s linear infinite;
                      animation: anime 6s linear infinite;
            }
          
           .btn2 {
              position: absolute;
              margin-top: -70px;
              z-index: -1;
              filter: blur(30px);
              opacity: 0.8;
            }
          
          
            @keyframes anime {
              0% {
                background-position: 0% 50%;
              }
              50% {
                background-position: 100% 50%;
              }
              100% {
                background-position: 0% 50%;
              }
            }
          
            @-webkit-keyframes anime {
              0% {
                background-position: 0% 50%;
              }
          
              50% {
                background-position: 100% 50%;
              }          
              100% {
                background-position: 0% 50%;
              }
            }
          </style>

  

Button Hover

rewwg