Skip to main content

Neon light Button Animation in HTML ,CSS and Anime.css .Component With Source code





 By using HTML,CSS and Anime.css we will design the button with neon light animation effect.


Neon light Button Animation in HTML ,CSS  and Anime.css 


Source Code


 HTML:

                                                                                                   <!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>Neon light button</title>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="anime.css">

</head>

<body>

<a href="a">

<span></span>

<span></span>

<span></span>

<span></span>

Neon Button

</a>

                                                                                                                              
</html>

</body>



STYLE.CSS

body{

margin: 0;

padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #031321;
 font-family: consolas;
}
a
{
 display: inline-block;
 position: relative;
 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: #2557f3;
 background: #2196f3;
 box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3,
 0 0 80px #2196f3 ;
 transition-delay: 1s;
}





ANIME.CSS:

body{

margin: 0;
padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #031321;
 font-family: consolas;
 }
 a
 {
 display: inline-block;
 position: relative;
 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: #2557f3;
 background: #2196f3;
 box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3,
 0 0 80px #2196f3 ;
 transition-delay: 1s;
}
 */
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: 1s;
 }
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: 1s;
 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: 1s;
 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: 1s;
 transition-delay: 0.75s;
 }


Output:








Labels:

Comments

Post a Comment

Popular posts from this blog

Eduford HTML and CSS dynamic website template free with source code

               For more templates please subscribe the blog and share it             For more templates please subscribe the blog and share it                    For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it                                       DOWNLOAD TEMPLATE
Post a Comment
Read more

Website background design using HTML and CSS

         Background plays a big role in website designing. When a visitor visits a website, the background works to attract him and keep him on the website.      Website background design using HTML and CSS HTML: <!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> animated background </title> <link rel =" stylesheet " href =" style.css "> </head> <body> <div class =" wrapper "> <h2> Animated Background </h2> <div class =" box "> <div> </div> <div> </div> <div> </div> <div> </div> ...
Post a Comment
Read more

Why do front-end developer need a CSS framework?

  CSS frameworks have their downsides. So you would like to know whether you would like one or not. Here are a couple of strong arguments for using the frameworks: To build a website/web application faster You can save time by having a solid foundation that you simply can believe . CSS frameworks give web developers something that they're going to use and customize (if required). And for people who have limited coding skills, employing a CSS framework is that the sole because of create a solid product. To validate the planning hypothesis You can build an answer and test it together with your users. it's much faster and easier to make a prototype or wireframe with a framework instead of roll in the hay from scratch. PS：Designers also can create prototypes/wireframes employing a rapid prototyping tool. CSS frameworks works as per your needs There are tons of great frameworks you'll choose between . such as: Bootstrap Materialize Bulma Semantic ui Foundation
Post a Comment
Read more