Hello friends, in this blog you will learn how to create Neon light animation button hover effects using only html and CSS before I tell you that moving the mouse over this button glows like Glowing light which Looks beautiful and attracts.
Lighting and brightness effects set the right atmosphere for your button. It can attract user attention by putting it on your website. This button has a moving line around the border which looks beautiful.
As you can see in this image there are three Neon light buttons. Which has been created using html and CSS with a bright line moving around it. And when you move the mouse over this button, it starts glowing and looks beautiful.
Neon Light Button Animation Hover Effects Source Codes
First of all we know about the html code of neon light animation effects on hover effects. We took a div whose class name wrapper has three tags below this div. A tag is called an anchor tag. Use this tag for anything.
The link is done for and four span is tagged inside this a tag span tag is an inline element
Now we know about the css style of this tag. We have first placed the margin padding on the page of the button with zero and box-size border-box, after that the class wrapper is also given width, height and background-color. The tag is designed to give this type of style
If you know JavaScript or Python, then you can use this button in your website and blog, which will attract you to see. You will see a lot of work in the way this button is designed. If you are teaching or learning html and css, you will get a lot of help in designing this type of button. A border has been placed around this button which glows on the border of the button, which is attractive to see.
If you are having difficulties in understanding this, then you will understand by watching the video of this button. We have shared the video tutorial of this button below and you can see it by clicking on that video.
Video Tutorial of Neon Light Animation Button Hover Effects
I hope you understand by watching this video. And how the code of this button is written, you have already known that we have created this in html and CSS of the button. We have used two or more colors of this light button animation effect. I used what you can see
If you have complete knowledge of html and CSS, then you can use this button as a social icon or button in your website and blog, which will be attracted to your website and blog. I hope this shared button will be very helpful in understanding you early on.
If you want to get the source code of this neon light button, then you will be able to understand its source code by putting it in your file. We have given two source code files to this button, copy and paste both those files into your file.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="bt.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<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>
</div>
</body>
</html>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap:wrap;
min-height: 100vh;
background: #050801;
}
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 25px 30px;
padding: 40px 0;
color: #03e9f4;
font-family: "Roboto", serif;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
width: 250px;
-webkit-box-reflect:below 1px linear-gradient(transparent,#0005) ;
transform: rotateX(60deg) rotateZ(-20deg);
transform-style: preserve-3d;
}
a:nth-child(1) {
filter: hue-rotate(290deg);
}
a:nth-child(3) {
filter: hue-rotate(110deg);
}
a:hover {
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
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: -100%;
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%}
}
Post a Comment