Learn how to create an eye-catching CSS glow button in just a few steps. This tutorial covers everything from creating HTML markup to adding hover and glow effects.
Table of Contents
When creating buttons, it's usually easy to make them look great, but things start to get complicated when you want to make the button glow. This is where CSS glowing buttons come in handy! In this blog article, you'll find out how simple it is to take a standard button and make it glow with just a few lines of code.
Let's start making these amazing glowing button Using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Created by: Pranjal Bhadu
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Glow Button.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glow effect. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Finally, we will link CSS files into HTML so that we can see the final result. Congratulations! You have now learned how to create a Pure CSS Glow Button using HTML and CSS.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background: #050801;
font-family: 'Raleway', sans-serif;
font-weight: bold;
}
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);
}
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.50s;
}
@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%;
}
} Final Output:
Conclusion:
By following this tutorial, you've learned how to create an eye-catching CSS glow button in just a few steps. Buttons are an essential part of user interface design, and creating an impressive button can enhance the user experience and make a lasting impression. We encourage you to experiment with different styles and effects to create buttons that are unique and memorable. We hope this tutorial has been helpful in teaching you how to create an eye-catching CSS glow button. If you have any questions or comments, feel free to leave them below. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
