Creating a Stunning Neon Button Hover Effects | HTML CSS

Welcome

Create Stunning Neon Button Hover Effects | HTML CSS

Neon buttons can add a vibrant and futuristic touch to your website, giving it an edge and drawing attention to key elements. In this tutorial, we'll explore how to create stunning neon button hover effects using HTML and CSS. We'll do this in a unique style that combines simplicity with creativity.

Getting Started

Before we begin, make sure you have a basic understanding of HTML and CSS. If you're new to web development, don't worry! This tutorial will guide you step by step.

Setting up the HTML structure

html
</title>Glowing button</title>
 <link rel="stylesheet" href="neoncss.css"
</head>
</body>
<div class="wrapper">
    <a href="">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      CODE
    </a>
    <a href="">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      WITH
    </a>
    <a href="">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      YUSH
    </a>
  </div>

Adding CSS

Create a file named styles.css and link it in your HTML file.

Crafting the Neon Effect

Now let's dive into the CSS code to create the stunning neon effect.

CSS CODE:

csscc
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway',sans-serif;
  text-decoration: none;
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}
a{
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #03e9f4;
  font-size: 1.2rem;
  font-weight: bold;
  transition: .5s;
  overflow: hidden;
  margin-right: 70px;
}
a:hover{
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
a:first-child{
  filter: hue-rotate(225deg);
}
a:last-child{
  filter: hue-rotate(90deg);
}
a span{
  position: absolute;
  display: block;
}
a span:nth-child(1){
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s infinite;
}
@keyframes animate1{
  0%{
    left: -100%;
  }
  100%{
    left: 100%;
  }
}
a span:nth-child(2){
  top: -100%;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s infinite;
  animation-delay: .25s;
}
@keyframes animate2{
  0%{
    top: -100%;
  }
  100%{
    top: 100%;
  }
}
a span:nth-child(3){
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s infinite;
  animation-delay: .5s;
}
@keyframes animate3{
  0%{
    right: -100%;
  }
  100%{
    right: 100%;
  }
}
a span:nth-child(4){
  bottom: -100%;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s infinite;
  animation-delay: .75s;
}
@keyframes animate4{
  0%{
    bottom: -100%;
  }
  100%{
    bottom: 100%;
  }
}

Understanding the Code

Let's break down the CSS code:

• We begin by styling the button with basic properties like font size, padding, background color, etc.

• .neon-button:before and .neon-button:after create two pseudo-elements that will give the neon glow effect. These elements are initially hidden.

• When the button is hovered over, we change the color and also scale up and increase the opacity of the pseudo-elements to create the glow effect.

👇👽Tap

Here is the Source Code of this program

Conclusion

Congratulations! You've successfully created a stunning neon button with hover effects using HTML and CSS. Feel free to customize the colors, sizes, and animations to suit your website's design. This unique style can be a great addition to modern and edgy web interfaces. Experiment with different combinations to make it your own! 

Facebook

twitter

Instagram

YouTube