冰冻效果

梦里梦外; 2022-12-03 12:56 83阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        #frozen-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100vh;
        }
        
        button {
          border: 0;
          margin: 20px;
          text-transform: uppercase;
          font-size: 20px;
          font-weight: bold;
          padding: 15px 50px;
          border-radius: 50px;
          color: white;
          outline: none;
          position: relative;
        }
        
        button:before{
          content: '';
          display: block;
          background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
          background-size: 210% 100%;
          background-position: right bottom;
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          bottom:0;
          right:0;
          left: 0;
          border-radius: 50px;
          transition: all 1s;
          -webkit-transition: all 1s;
        }
        
        .green {
           background-image: linear-gradient(to right, #25aae1, #40e495);
           box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
        }
        
        .purple {
           background-image: linear-gradient(to right, #6253e1, #852D91);
           box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
        }
        
        .purple:hover:before {
          background-position: left bottom;
        }
        
        .green:hover:before {
          background-position: left bottom;
        }
      </style>
    </head>
    <body>
      <div id="frozen-btn">
        <button class="green">Hover me</button>
        <button class="purple">Hover me</button>
      </div>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c5284d8260e04dc6bf2ca6d89abe9e80.png