Adding Glowing Button with Reflection in Blogger

Hellow viewer's how are you I hope you are good and doing great. So welcom back to another article of button series.

So today we are going to Add Glowing Button with Reflection on Blogger Blog.

So be patience and read till end so that without any error you can add this. With another design of buttons not only your blog will look great but it also gives premium feels to it.

Demo

So without seeing you can't see the beautiful buttons. So let's start the tutorial.

Before proceeding backup your blog theme for any kind of error and easy restoration.

Adding Glowing Buttons

There are only one step you have to is add the CSS of button. After that you can perfectly use the button on your blog.

Adding CSS

1. Login to your Blogger account.
2. Click on theme section.
3. And then edit HTML.
4. Now search for the code </body> tag.
5. Copy the below given CSS and paste it just above the </body> tag.

<style type="text/css">
  but{position:relative;display:inline-block;padding:10px 10px;margin:40px;color:#03e9f4;text-decoration:none;text-transform:uppercase;transition:0.5s;letter-spacing:4px;overflow:hidden}but:hover{background:#03e9f4;color:#050801;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;-webkit-box-reflect:below 1px linear-gradient(transparent,#0005)}but span{position:absolute;display:block}but span:nth-child(1){top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#03e9f4);animation:animate1 1.6s linear infinite}@keyframes animate1{0%{left:-100%}50%,100%{left:100%}}but span:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#03e9f4);animation:animate2 1.6s linear infinite;animation-delay:0.40s}@keyframes animate2{0%{top:-100%}50%,100%{top:100%}}but span:nth-child(3){bottom:0;right:0;width:100%;height:2px;background:linear-gradient(270deg,transparent,#03e9f4);animation:animate3 1.6s linear infinite;animation-delay:0.80s}@keyframes animate3{0%{right:-100%}50%,100%{right:100%}}but span:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#03e9f4);animation:animate4 1.6s linear infinite;animation-delay:1.20s}@keyframes animate4{0%{bottom:-100%}50%,100%{bottom:100%}}
</style>

Now click on save theme.

Button Codes

Below are the demo with codes for using the button. Copy the code from below buttons when you want to use any button on your blog.

1. Pink💗

Tech With Aadi

<center>
  <but onclick="window.open('https://www.techaadi.eu.org/?m=1')" style="filter: hue-rotate(110deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Tech With Aadi
  </but>
</center>

1. Orange🧡

Tech With Aadi

<center>
  <but onclick="window.open('https://www.techaadi.eu.org/?m=1')" style="filter: hue-rotate(190deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Tech With Aadi
  </but>
</center>

1. Blue💙

Tech With Aadi

<center>
  <but onclick="window.open('https://www.techaadi.eu.org/?m=1')" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Tech With Aadi
  </but>
</center>

1. Green💚

Tech With Aadi

<center>
  <but onclick="window.open('https://www.techaadi.eu.org/?m=1')" style="filter: hue-rotate(270deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Tech With Aadi
  </but>
</center>

After all this above steps I hope you have successfully installed the Glowing Button with Reflection on your blog. If you got any error kindly contact me.

Conclusion.

So today we have talked about Adding Glowing Button with Reflection in Blogger Blog. I hope you liked this article if you got any query kindly comment below. Have a great 😃 weekend ahead.

Reference:
https://www.phamvanlinh.xyz