CSS Neon Glowing Snake Border Animation Button with Source Code
CSS Neon Glowing Button on Hover Effect with Source Code | Snake Border Animation Step by Step. Glowing Gradient Button Animation Effects on Hover.
Hi
guys, I hope you learned something from your previous post on how to create animation form. We will learn to
make a neon light creative button effect through this post today.
I
hope you will learn something. You need to knowledge in advance to create a
neon light effects CSS on hover.
All you need to do is animation, transition, box, and text-shadow. With this much coming, your work will also be done. To create a pure CSS animated snake border, we have put in some steps which will help you.
First Steps: HTML Structure
We
have taken one div, whose class is the container, in that div we have taken the
anchor tag which has the four SPAN tag, you must be thinking that why have we
taken the SPAN tag. You will get the answer when you do this code by yourself.
Second Steps: Animated Gradient Button Effect on Hover
Now
it is acquitted. It’s the most important part of CSS in web design helps you to
make your design good looking.
Let's
start styling, friends. The first which I’ve taken universal selector in which
we zeroed the margin and padding, and box-sizing: border-box;
Now
we have to style the container in which the width and height have been given
100 viewport width&height. which will be the width of our device, in which
it will adapt itself.
I
have flexed the display of this div. All the divs inside this div will be
flexed, which means all will have come in a single row. But we have to bring it
into the center, so we will use justify-content of flex-item property: center
and align-item: center; Whatever will be the div inside it will enter the
center.
Third Steps: Glowing Gradient Button Animation Effects on Hover
We will style the anchor tag, in the anchor tag we’ve text-decoration: none, color, letter-spacing, position, and transition so that our animation is smooth. Now the display: block; of the anchor tag which is our SPAN tag Will end position.
Now I will provide you video and source code absolute free which make helps your life in the coding world.
Watch Video:-
HTML & CSS Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neon Button</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
background-color: rgb(14, 13, 13);
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
color: #255784;
text-transform: uppercase;
padding: 10px 30px;
font-size: 35px;
letter-spacing: 4px;
transition: 0.2s;
position: relative;
overflow: hidden;
}
a:hover {
background-color: #0089fa;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;
}
a span {
display: block;
position: absolute;
}
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: 1s;
}
a span:nth-child(3) {
bottom: 0;
left: 100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #2196f3);
}
a:hover span:nth-child(3) {
left: -100%;
transition: 1s;
transition-delay: .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: 1s;
transition-delay: .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: 1s;
transition-delay: .75s;
}
</style>
</head>
<body>
<div class="container">
<a href="http://" target="_blank" rel="noopener noreferrer">
<span></span>
<span></span>
<span></span>
<span></span>
Click Neon
</a>
</div>
</body>
</html>
Post a Comment