button样式

刺骨的言语ヽ痛彻心扉 2022-12-03 12:55 163阅读 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>
        #neon-btn {
          display: flex;
          align-items: center;
          justify-content: space-around;
          height: 100vh;
          background: #031628;
        }
        
        .btn {
          border: 1px solid;
          background-color: transparent;
          text-transform: uppercase;
          font-size: 14px;
          padding: 10px 20px;
          font-weight: 300;
        }
        
        .one {
          color: #4cc9f0;
        }
        
        .two {
          color: #f038ff;
        }
        
        .three {
          color: #b9e769;
        }
        
        .btn:hover {
          color: white;
          border: 0;
        }
        
        .one:hover {
          background-color: #4cc9f0;
          -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
          -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
          box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
        }
        
        .two:hover {
          background-color: #f038ff;
          -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
          -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
          box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
        }
        
        .three:hover {
          background-color: #b9e769;
          -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
          -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
          box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
        }
      </style>
    </head>
    <body>
      <div id="neon-btn">
        <button class="btn one">Hover me</button>
        <button  class="btn two">Hover me</button>
        <button  class="btn three">Hover me</button>
      </div>
     
    </body>
    
    </html>

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