How To Add Animated Neon Light Button To Your Blogger Website

Hi everybody, welcome to Theforyou.online in this post I will show you How To Add Animated Neon Light Button To Your Blogger Website by Html And CSS.it is Neon light CSS animation For Blogger Website.

Features Of Animated Neon Light Button—

so this is how it looks when we hover over it we have this flicker effect and also the neon light effect and if you want to learn how to design this Animated Neon button from scratch.

Follow these steps to add Animated Neon Button in blogger post—

Adding Neon Button Code in Blogger Post—

1. Go to Blogger Dashboard
2. Go to Posts Section to add Neon Button Code in blogger post
3. Add A New Post and copy the code provided below.
4. here you have to go to this button and click on html view so you're gonna type your html code right here in the compose view for that you have to go to the html view and after that you can just paste your html Neon button code over here and then just click on publish and then confirm
5. And Publish your post

<button class="neon-button">Your Text is Here</button>

Adding Css Neon Code in Blogger Theme—

1. After this , Go to your Blogger Theme and click Customize to access Blogger Theme Designer 
2. Then choose Advanced > Add CSS 
3. Copy the following code and paste and click Apply to Blog

button.neon-button {
  border: 3px solid #ffa9b7;
  background: #fff;
  padding: 16px 32px;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  color: #ffa9b7;
  letter-spacing: 8px;
  font-weight: bold;
  margin: 24px;
  cursor: pointer;
}

button.neon-button:hover {
  animation: flicker 400ms linear forwards;
}

@keyframes flicker {
  5% {
    border-color: #fa032c;
    color: #fa032c;
    text-shadow: 0 0 4px #ff4262;
    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
  }

  10% {
    border-color: #ff4262;
    color: #ff4262;
    box-shadow: unset;
    text-shadow: unset;
  }

  55% {
    border-color: #fa032c;
    color: #fa032c;
    text-shadow: 0 0 4px #ff4262;
    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
  }

  75% {
    border-color: #fa032c;
    color: #fa032c;
    text-shadow: 0 0 4px #ff4262;
    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
  }

  80% {
    border-color: #ff4262;
    color: #ff4262;
    box-shadow: unset;
    text-shadow: unset;
  }

  100% {
    border-color: #fa032c;
    color: #fa032c;
    text-shadow: 0 0 4px #ff4262;
    box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
  }
}

Conclusion—

All right now let's go to our post and refresh our page and we can see that our neon light button is being displayed over here let's hover over it and see whether we have the flicker animation and we can see that everything is working all right so this is how you add a neon light button to your blogger website..

thank you for visiting. Happy Blogging..