使用 CSS 的闪亮霓虹按钮效果

可以使用带有阴影效果的纯 CSS 创建闪亮的闪烁霓虹按钮。这些按钮可用于在深色背景或主题上提供良好的对比度。它具有简约的外观并吸引用户的注意力。必须遵循以下步骤来创建这种效果。

HTML 部分：此部分包含显示按钮所需的 HTML 代码。这些按钮是用 div 元素创建的，并分配了一个我们稍后将创建的类。

HTML

  

    

        BUTTON 1
    
    

        BUTTON 2
    

  

CSS 部分：此部分包含为按钮添加效果的代码。

box-shadow属性用于向具有 inset 值的阴影添加一组不同的颜色。按钮通过使用border-radius属性圆角，并使用left属性正确对齐。

CSS

/* Set the background color of 
   all the elements */
* {
    background-color: black;
}
  
.button {
 
    /* Change the shape of the button */
    height: 35px;
    width: 100px;
    border-radius: 20%;
 
    /* Position the buttons */
    position: fixed;
    top: 48vh;
 
    /* Center the name of the button */
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.button_1 {
    /* Position the button */
    left: 35vw;
    /* Add the shadow effect for the button */
    box-shadow: inset 0 0 18px #fff, 
       inset -6px 0 18px #f3bad6, 
       inset 6px 0 18px #0ff, 
       inset -6px 0 30px #f3bad6, 
       inset 6px 0 30px #0ff, 
       0 0 18px #fff, 4px 0 18px 
       #f3bad6, -4px 0 18px #0ff;
}
  
.button_2 {
 
    /* Position the button */
    left: 55vw;
 
    /* Add the shadow effect for the button */
    box-shadow: inset 0 0 18px #fff, 
       inset 6px 0 18px #f3bad6, 
       inset -6px 0 18px #0ff, 
       inset 6px 0 30px #f3bad6, 
       inset -6px 0 30px #0ff, 
       0 0 18px #fff, -4px 0 18px 
       #f3bad6, 4px 0 18px #0ff;
}

完整代码：是以上两段代码的组合。

HTML

  

  

  

    

        BUTTON 1
    
  
    

        BUTTON 2
    

  

输出：