Neon Light Button Animation using HTML & CSS

Neon Light Button Animation using HTML & CSS

This article will help you to know how to create Neon Light Button Animation using HTML and CSS. neon button animation is a colorful button animation. This makes ordinary buttons much more attractive and beautiful.

Buttons we all use in different projects or web pages. However, if it is animated, it enhances the beauty of the webpage. Here I have created a button to which I have added neon animation. In the case of neon button animation, the animation is created by combining different types of colors together.

Here I first created a button using text and used four colorful lines around that button. Which combined with each other to create CSS glow effect animation. I only used HTML and CSS to make it. I have added the required information using HTML. I have designed the Neon Light Button with the help of CSS.

Neon Button Animation CSS

Below I have given a preview that will help you to know how this project works. Here you will find the required source code. However, I have shared all the tutorials below for beginners.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.

If you only want the source code, use the download button below the article. To create neon background CSS you must have a basic idea about HTML and CSS.

Step 1: Basic structure of Neon Button

Added the necessary information for this button using the following HTML and CSS codes. The background color of the webpage here is deep blue.

<a href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
     Neon Button
</a>


*{
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body{
 background: #0c002b;
 font-family: sans-serif;
}

Basic structure of Neon Button

Step 2: Button is designed by CSS

The text has been given the shape of a button using the following CSS. This button is kept equal to the background color of the web page. However, the shadow is used here to understand the size of the button.

a{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 color: #1cc7f2;
 padding: 30px;
 letter-spacing: 2px;
 text-transform: uppercase;
 text-decoration: none;
 box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

Button is designed by CSS

Now the color of half the space of the button has been changed using the after of CSS. Half of the neon button animation uses blue and more purple.

a:before{
 content: '';
 position: absolute;
 top: 2px;
 left: 2px;
 bottom: 2px;
 width: 50%;
 background: rgba(255,255,255,0.05);
}

Light Button Animation

Step 3: Add Neon Animation to Button

Who created the first line animation using the following CSS. This animation will continue to move from right to left for Infinity Time.

a span:nth-child(1){
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(to right,#0c002b,#23d3f5);
 animation: animate1 2s linear infinite;
}

@keyframes animate1{

0%{
 transform:translateX(-100%);
}

100%{
 transform:translateX(100%);
}
}

Add Neon Animation to Button

I have created the second animated line using the following css. This animation can be seen from top to bottom.

a span:nth-child(2){
 position: absolute;
 top: 0;
 right: 0;
 width: 3px;
 height: 100%;
 background: linear-gradient(to bottom,#0c002b,#23d3f5);
 animation: animate2 2s linear infinite;
}

@keyframes animate2{

0%{
 transform:translateY(-100%);
}

100%{
 transform:translateY(100%);
}
}

second animated line

Now let's create the third animated line of Neon Light Button Animation which will continue from right to left.

a span:nth-child(3){
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(to left,#0c002b,#23d3f5);
 animation: animate3 2s linear infinite;
}

@keyframes animate3{

0%{
 transform:translateX(100%);
}

100%{
 transform:translateX(-100%);
}
}

create the third animated line

Now, who made the last animation line i.e. the fourth border animation. This animation will continue from bottom to top.

a span:nth-child(4){
 position: absolute;
 top: 0;
 left: 0;
 width: 3px;
 height: 100%;
 background: linear-gradient(to top,#0c002b,#23d3f5);
 animation: animate4 2s linear infinite;
}


@keyframes animate4{

0%{
 transform:translateY(100%);
}

100%{
 transform:translateY(-100%);
}
}

last animation line

Hopefully, you have learned from the above tutorial how I created this CSS neon button animation. If there is any problem then you can definitely let me know by commenting. 

Earlier I created many more button animations that you can use. The source code needed to create this glowing button animation CSS is in the button below you.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more