Add Neon Effect using CSS

By Abhilash Khuntia

Hello and welcome to this tutorial on how to add Neon Effect to your HTML link using CSS.

So, for this tutorial, you should have prerequisite knowledge about HTML and CSS.

So, without wasting time let’s get ahead into this tutorial.

How to add Neon Effect using CSS

We all know what a neon bulb is.

We are going to use the same concept here.

Neon Button is a simple HTML button that glows brightly like a neon bulb.

Here, we will make the button glow when the user hovers over the link.

Let us take the below HTML code.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
</head>
<body>
  <a href="#">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Neon Button
  </a>
</body>
</html>

Our link currently looks like this.

neon button

Now, let’s add some styling.

body
{
  margin:0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #031321;
  font-family: consolas;
}
a
{
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  color: #2196f3;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;
  font-size: 24px;
  overflow: hidden;
  transition: 0.2s;
}
a:hover
{
  color: #255784;
  background: #2196f3;
  box-shadow:  0 0 10px #2196f3, 0 0 40px	#2196f3 , 0 0 80px #2196f3;
  transition-delay: 0.75s;
}

a span
{
  position: absolute;
  display: block;
}
a span:nth-child(1)
{
  top:0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#2196f3);
}
a:hover span:nth-child(1)
{
  left: 100%;
  transition: 0.5s;
}

a span:nth-child(3)
{
  bottom:0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg,transparent,#2196f3);
}
a:hover span:nth-child(3)
{
  right: 100%;
  transition: 0.5s;
  transition-delay: 0.5s;
}

a span:nth-child(2)
{
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,#2196f3);
}
a:hover span:nth-child(2)
{
  top: 100%;
  transition: 0.5s;
  transition-delay: 0.25s;
}

a span:nth-child(4)
{
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,#2196f3);
}
a:hover span:nth-child(4)
{
  bottom: 100%;
  transition: 0.5s;
  transition-delay: 0.75s;
}

Save this file with .css extension.

Now, link this CSS file with HTML file using –

<link rel="stylesheet" type="text/css" href="asd.css">

Place the above line of code in the <head> tag.

That’s you are done.

Your final product looks as shown below.

Thank you for reading this post.

Hope you enjoyed it.

Have a nice day ahead!

To learn more in CSS, read How to use Radial-Gradient in CSS

and How to make an image jiggle using CSS

Add Neon Effect using CSS

How to add Neon Effect using CSS

Leave a Reply Cancel reply