Colorful Buttons with Hover Effect for Blogger | Only CSS |

Hello friends, how are you I hope you are doing great as always. So today I was browsing some websites and then found beautiful Buttons with Hover effect.

So today we are going to see the tutorial of adding Colorful Buttons with Hover Effect for Blogger and only with CSS. In previous article the hovering button was in only black colour.

But today we got the colorful buttons. So follow this article to the end. And you will successfully install your Colorful Buttons in your blog.

So why so wait come on let's start the process.

Important!Before proceeding always backup your blog template for any kind of error and easy restoration.

Demo

Installing Colorful Buttons with Hover Effect

Step 1

1. Open Blogger dashboard.
2. Go to theme section and then click on edit html.
3. Now search for </body> tag.
4. Copy the below given css before </body> tag.

<style type="text/css">  
  .fill:hover,.fill:focus{box-shadow:inset 0 0 0 2em var(--hover)}.close:hover,.close:focus{box-shadow:inset -3.5em 0 0 0 var(--hover),inset 3.5em 0 0 0 var(--hover)}.raise:hover,.raise:focus{color:#ffec48;box-shadow:0 0.5em 0.5em -0.4em var(--hover);transform:translateY(-0.25em)}.up:hover,.up:focus{box-shadow:inset 0 -3.25em 0 0 var(--hover)}.slide:hover,.slide:focus{box-shadow:inset 6.5em 0 0 0 var(--hover)}.offset{box-shadow:0.3em 0.3em 0 0 var(--color),inset 0.3em 0.3em 0 0 var(--color)}.offset:hover,.offset:focus{box-shadow:0 0 0 0 var(--hover),inset 6em 3.5em 0 0 var(--hover)}.fill{--color:#a972cb;--hover:#cb72aa}.close{--color:#ff7f82;--hover:#ffdc7f}.raise{--color:#ffa260;--hover:#ffec48}.up{--color:#e4cb58;--hover:#94e458}.slide{--color:#8fc866;--hover:#66c887}.offset{--color:#19bc8b;--hover:#1973bc}button{color:var(--color);transition:0.25s}button:hover,button:focus{border-color:var(--hover);color:#fff}button{background:none;border:2px solid;font:inherit;line-height:1;cursor:pointer;padding:1em 2em}
</style>

Now click on save theme.

Step 2

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.

<center><button class="fill" onclick="window.open('https://www.techaadi.eu.org/')" target="blank" title="Tech Aadi">Fill In</button></center>

<center><button class="close" onclick="window.open('https://www.techaadi.eu.org/')" target="blank" title="Tech Aadi">Close</button></center>

<center><button class="raise" onclick="window.open('https://www.techaadi.eu.org/')" target="blank" title="Tech Aadi">Raise</button></center>

 <center><button class="up" onclick="window.open('https://www.techaadi.eu.org/')" target="blank" title="Tech Aadi">Fill Up</button></center>

<center><button class="slide" onclick="window.open('https://www.techaadi.eu.org/')" target="blank" title="Tech Aadi">Slide</button></center>

<center><button class="offset" onclick="window.open('https://www.techaadi.eu.org/')" target="blank" title="Tech Aadi">Offset</button></center>

Change the button url link  www.techaadi.eu.org 🔗 with your url and button title Tech Aadi with your title.

After following all the above steps I hope you have successfully installed Colorful Hover Effect Button in your blog. If you have got any problem kindly contact me.

Conclusion

So I hope you liked our post so kindly do give a comment below for this post. And do regular visit our site for more update in future like this. I hope you have a wonderful time ahead 😊.

Reference:
https://www.phamvanlinh.xyz

Go to Link