Css Html Only Neon Text With Glow Effect

Css Html Only Neon Text With Glow Effect

Css Html Only Neon Text With Glow Effect


Heyy.. learners, Today we are going to learn a small and easy project which looks so good. So First before learning it Let's take a look at it.

Live Preview

See the Pen Untitled by Himanshu Singh (@himanishu)


HTML CODE(STRUCTURE/LAYOUT OF THE WEBSITE):-

Just simply you can use the button but I used a anchor tag in place of anchor tag you can use a button,
I have made two divs one for outer and second for inner portion as you can sed upside in the live server
A colour which is rotating.
 <!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>Document</title>  
 </head>  
 <body>  
   <div class="outer">  
     <div class="inner">  
       <a href="#">Hover me</a>  
     </div>  
   </div>  
 </body>  
 </html>  
CSS(Styling the button):-

We have used simple styling methods like flexbox I give the dimensions of the inner and outer div as same but give padding to outer so there is a differentiation between the outer and inner div and give color to outer div and applied filter:hue rotate property.
 body{  
       width:100vw;  
       height:100vh;  
       display:flex;  
       justify-content: center;  
       align-items:center;  
       background-color: black;  
     }  
     .outer{  
 width:300px;  
 height:50px;  
 border-radius:10px;  
 padding:5px;  
     }  
     .outer:hover{  
       animation-name:rotate;  
       animation-iteration-count:infinite;  
       animation-duration:1s;  
       animation-delay: 0ms;  
       background-color: rgb(23, 248, 248);  
     }  
     .outer:hover a{  
       color:aqua;  
     }  
 @keyframes rotate {  
   from{  
     filter: hue-rotate(0deg);  
   }  
   to{  
     filter:hue-rotate(360deg);  
   }  
 }  
     .inner{  
       width:100%;  
       height:100%;  
       display:flex;  
       justify-content: center;  
       align-items:center;  
       background-color: black;  
       border-radius:10px;  
     }  
     a{  
       color:white;  
       text-decoration:none;  
       font-weight: 900;  
       font-size:25px;  
     }  


I hope you liked it Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.


If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.


Post a Comment

Previous Post Next Post