Hello Coders, In this article, We are going to learn how to create Glowing Neon Buttons using HTML and CSS. Before that, there are some things about which you need to know. So lets get started.
What is Google Fonts?
For this project we will be using a custom font from Google Fonts i.e Raleway. If you don’t know what google fonts is, here is a short introduction to it. Google Fonts is a library which contains more than thousand font families which we can use in our projects. All the fonts provided by the google fonts are completely free and open source.
What are KeyFrames?
So what are keyframes? CSS allows animations of the HTML elements without using JavaScript. Using keyframes we can add animations to our HTML elements. As you can see in the demo Image below that the border of the buttons is actually circling around. That animation is added with keyframes. You can read more about keyframes here.
What is FlexBox?
CSS3 FlexBox is used to make the elements adjust themselves when they are used in different display Screens or devices.
So this was all you should know before continuing with this project. You can have a look at the demo below so that you know what you will be building at the end.
Glowing Neon Buttons in HTML and CSS | Video Tutorial :
Consider watching the video tutorial if you find it hard to follow along with this article and if you are a complete beginner. In the video tutorial above, I have shown how to create glowing neon buttons step by step.
Glowing Neon Buttons Hover Effect in HTML and CSS | Source Code
Okay lets start building it. Follow along with this step by step tutorial article to build this glowing hover effect for buttons. We will also be adding some animation around the borders using keyframes. You can also download complete source code from download button at the bottom.
How to create glowing neon buttons in HTML? Free HTML Glowing Neon Buttons source code
Create an index.html file and start following the step by step guide to build glowing neon buttons using html and css.
Step 1 : Inside the index.html we are gonna define three anchor tags (<a>) each having 4 span tags (<span>).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glowing Buttons</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
</body>
</html>
How to design glowing neon buttons in CSS? Free CSS Glowing Neon Buttons source code
Create a styles.css file and don’t forget to link the file to your index.html file. once done continue with the below steps.
Step 2 : Lets move on to the main part. That is adding styles to the code. So, in the first part we are going to import a custom font from the google fonts, that is we will be importing Raleway font with weight 400 & 700 and reset the default browser styles.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Step 3 : Once done, Now lets add the main styles. First lets target the body and make everything to align center and setting the background color to black. We will also define the font family which we already imported in the first step.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #050801;
font-family: 'Raleway', sans-serif;
font-weight: bold;
}
How to create button hover effect in CSS? CSS Source Code
By adding hover effect to the buttons, we can make them glow when we place cursor or hover on button. Follow below step to know how to add it.
Step 4 : Now its time to style those anchor tags and add the hover property to it. We will also define different colors for each anchor tags by using the filter and rotating the hue.
a {
position: relative;
display: inline-block;
padding: 25px 30px;
margin: 40px 0;
color: #03e9f4;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
margin-right: 50px;
}
a:hover {
background: #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:nth-child(1) {
filter: hue-rotate(270deg);
}
a:nth-child(2) {
filter: hue-rotate(110deg);
}
Step 5 : We are done with styling the anchor tags and making them glowing neon buttons. Now its time to add the animation around those buttons which rotates around those buttons. Observe the final demo.
Remember we created 4 span tags in the beginning. We will target them individually by saying ( a span:nth-child(1) ) and so on. It is used to select the child elements which are inside of the anchor tags. Now we have 4 span tags, we will select each one of them and add keyframe animations.
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
a span:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes animate3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
Its done. You have completed building Glowing Neon Buttons using HTML and CSS. After completing this is what you should be having.
Final Demo of Glowing Neon Buttons :
Thank you for reading this article.
Credits : Pranjal Bhadu
You can download the complete source code from below link and if you are facing any problems while building this, let me know in the comments.
