How to Make Demo and Download Buttons with Animation on Blogger

How to Make Demo and Download Buttons with Hover Animation on Blogger

I thought of this Demo & Download button design because I was interested and liked it because it was simple and had a hover animation when touched or directed with a mouse cursor.

The Demo and Download buttons are very useful for blogs whose articles are full of demo or download links. This design is very suitable to be installed on your blog.

So let's go to read this tutorial Share By Top Blog Pk ...

How to Make Demo and Download Buttons with Hover Animation on Blogger

1. Login first to Blogger .
2. In the Blogger Dashboard select the Theme menu and Edit HTML .
3. Copy the CSS below above ]]> </ b: skin> .

/* Start - Demo and Download Buttons

 by Top Blog Pk • Mubassir Ali */

.botton{width:200px;height:60px;background:none;border:4px solid;color:#97bdee;font-weight:700;text-transform:uppercase;cursor:pointer;font-size:16px;position:relative;background:#1a73e8}.botton::before,.botton::after{content:"";position:absolute;width:14px;height:4px;background:#fff;transform:skewX(50deg);transition:.4s linear}.botton::before{top:-4px;left:10%}.botton::after{bottom:-4px;right:10%}.botton:hover::before{left:80%}.botton:hover::after{right:80%}

/* End - Demo and Download Buttons

 by Top Blog Pk • Mubassir Ali */

4. After copying the CSS code then press Save Theme .

5. The last step copy the HTML code below in the article post you want to install the button then press Save or Publication .

/* Start - Demo and Download Buttons by Top Blog Pk • Mubassir Ali */

<a href="topblogpk.blogspot.com"><button class="Demo">Demo</button></a>


<a href="topblogpk.blogspot.com"><button class="Download">Download</button></a>


/* End - Demo and Download Buttons by Top Blog Pk • Mubassir Ali */

6. This is the result if the installation is successful.

🚫 IMPORTANT ! 

Change in case 5 [code section] topblogpk.blogspot.com with your active links.

☪️ Note:

You can also use it as a single Button. 

Just as
🔻

/* Start - Single Button  by Top Blog Pk • Mubassir Ali */

<a href="Link"><button class="botton">Button</button></a>

/* End - Single Button by Top Blog Pk • Mubassir Ali */

🇵🇰 OUTPUT 🇵🇰