Skip to main content

Archive

Show more

Glowing Neon Light Button Animation | HTML And CSS

by Rustcode
Glowing-Neon-Light-Button-Animation-HTML-And-CSS

Glowing Neon Light Button Animation | HTML And CSS

Website developer tries to convey message through designing and tries to develop web application according to user experience. There are many elements that are responsible for making great web experienc and the button is one of them. You have different button style for different work for example next button, switch button, cart button, button with border animation etc. You can check out playlist of button animations, link is below:

In this article we will design the button which will have "Glowing Neon Light Animation". You will see this effect when you hover over the button. This effect is using the "box-shadow" CSS property. It has a reflection animation on hover as you can see in the image. So let's get started without any further ado.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Glowing Neon Light Button Animation | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>

 <a href="#">NEON BUTTON</a>
  
</body>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #F9F9F9;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
}
a{
    position: relative;
    display: inline-block;
    padding: 24px 48px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;    
    border: 3px solid #8A2AE3;
    color: #8A2AE3;
    font-size: 16px;
    letter-spacing: 1px;
   
}
a:hover{
    background: #8A2AE3;
    color: #fff;
    box-shadow: 0 0 5px #8A2AE3,
                0 0 25px #8A2AE3,
                0 0 50px #8A2AE3,
                0 0 200px #8A2AE3;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment