Adding Glowing Button with Reflection in Blogger

Hello Everyone! Welcome back to FreemiumTech, Toady on this occasion our tutorial is How to Add Glowing Button with Reflection in Blogger? Everyone likes colorful Styles. Here the Top selection of animated download Buttons that change the Background Color when click on the button and it is very attractive and gives a feel while click on it.

What is Glowing Button?

Glowing button designs are involved in highlights and shadows in design elements to make them look as though they are layered on the page. Glowing button creates a Glassy frost-style or Glassy blur style where elements sink drown and force out from the background to create varying levels. Combining these effects with a glowing and more pastel color palettes, and the result is a light, “glowing” interface with deep in shadows and change the overall effects.

Glowing Designs doesn’t focus more on things like contrast or similarities between real and digital elements. Instead of of these they focus on “glow” which creates a smoother experience for users. With glowing button Designs, you will get the feel that Buttons and Cards are actually part of the background they are laid on. This glowing button trend removes the attractive aspects of a typical interface and focuses on a Softer style that stays consistent throughout the design and make the user interference clean.

Glowing button basically removes the sharp corner of the interface and make the corners glow for gentle appearance and Iconic design.

Benefits of Glowing Buttons :-

Clean Optimized look.
Overall Gentle Appearance.
Glowing effect Design.
Change your old buttons to this new style.
Adds 3d Feel while Hovering on Buttons.

How to Add Glowing Button with Reflection in Blogger?

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.

Step 1: Login to your Blogger Dashboard

Step 2: Go to Themes

Step 3: Click on the Drop down arrow and select Edit HTML

Step 4: Now search for ]]> or </body> and paste the following CSS just above it.

You can use our CSS Minifier to minify this CSS and make this more lightweight

/* Glowing Button Style by FreemiumTech */
<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>

Step 5 : Now add the Below button codes in your Particular Post/Page

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.

Add your links at #

Freemium Tech

 <center>
  <but onclick="window.open('https://FreemiumTech.blogspot.com/?m=1')" style="filter: hue-rotate(110deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center>

Freemium Tech

 <center>
  <but onclick="window.open('https://freemiumtech.blogspot.com/?m=1')" style="filter: hue-rotate(190deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center>

Freemium Tech

 <center>
  <but onclick="window.open('https://freemiumtech.blogspot.com/?m=1')" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center>

Freemium Tech

 <center>
  <but onclick="window.open('https://freemiumtech.blogspot.com/?m=1')" style="filter: hue-rotate(270deg)" target="blank">
    <span></span>
    <span></span> 
    <span></span>
    <span></span>
    Freemium Tech
  </but>
</center>

Conclusion

In this post I have made a tutorial about

How to Add Glowing Button with Reflection in Blogger? Which gives a colorful animation feel while hovering. I hope you have liked it and please share with your friends and follow our blog for more.

If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.

Join Telegram

Go to Link