Create Neon Light Button With Animation Effects On Hover




In this advanced web development tutorial, we will use combination of advanced CSS and CSS animation components, and HTML to create a magnificent CSS Neon Light Button.


If are not familiar with programming, you can copy and paste the code from the code examples, or from the code editors, and use it for your own website
Click or hover over the CSS Button below to see the effect:




Open in code editor >>



Modern CSS allow you to create an amazing buttons, and other website elements, This advanced CSS tutorial is a great way for any web developer to learn advanced styling skills, take your website to the next level.


This lesson include:


  • HTML Instructions
  • CSS Instructions

We will add comments inside the example code boxes and code editors to explain as much as we can, comments are in grey color.





Part 1


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>



Code Example:

            <body>
    <a href="#">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
      Radiant Button 
    </a>
    <a href="#">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
      Radiant Button 
    </a>
    <a href="#">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
      Radiant Button
    </a>
   </body> 
  
Try yourself >>





Part 2


Add CSS

Add the style sheets:


Code Example:

         <style>
*
{
  background-color:black;
  padding:0;
  margin:0;
  font-family:consolas;
  box-sizing:border-box;
}
body
  {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  min-height:100vh;
  }
a
{
  position:relative;
  margin:70px 0;
  padding: 30px 30px;
  display:inline-block;
  color:#03e9f4;
  text-decoration:none;
  text-transform:uppercase;
  overflow:hidden;
  transition:0.5s;
  letter-spacing:4px;
  font-size:22px;
}
a:nth-child(1)
{
   filter: hue-rotate(290deg);
}
a:nth-child(3)
{
  filter: hue-rotate(110deg);
}
a:hover
{
  color:#050801;
  background:#03e9f4;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 60px #03e9f4,
              0 0 210px #03e9f4;
}
a span
{
  display:block;
  position:absolute;
}
a span:nth-child(1)
{
  left:-100%;
  top:0;
  background: linear-gradient(90deg,transparent,#03e9f4);
  animation:animate1 1s linear infinite;
  width:100%;
  height:2px;
}
@keyframes animate1
{
  0%
  {
    left:-100%;
  }
  50%, 100%
  {
    left:100%;
  }
}
a span:nth-child(2)
{
  right:0;
  top:-100%;
  background: linear-gradient(180deg,transparent,#03e9f4);
  animation:animate2 1s linear infinite;
  width:2px;
  height:100%;
  animation-delay:0.25s;
}
@keyframes animate2
{
  0%
  {
    top:-100%;
  }
  50%, 100%
  {
    top:100%;
  }
}
a span:nth-child(3)
{
  right:-100%;
  bottom:0;
  background: linear-gradient(270deg,transparent,#03e9f4);
  animation:animate3 1s linear infinite;
  width:100%;
  height:2px;
  animation-delay:0.5s;
}
@keyframes animate3
{
  0%
  {
    right:-100%;
  }
  50%, 100%
  {
    right:100%;
  }
}
a span:nth-child(4)
{
  left:0;
  bottom:-100%;
  background: linear-gradient(360deg,transparent,#03e9f4);
  animation:animate4 1s linear infinite;
  width:2px;
  height:100%;
  animation-delay:0.75s;
}
@keyframes animate4
{
  0%
  {
    bottom:-100%;
  }
  50%, 100%
  {
    bottom:100%;
  }
}
</style> 
  

Try yourself >>









Learn modern front-end development free and easy, Learn to Code in an interactive guide with one goal: learn how to develop and style websites with best programming langueges, this advanced CSS tutorial covers all of the common and advanced elements of front-end design and development.

Navigation