Add Attractive CSS Download Button to Blog Posts

If you are writing blog posts attached with tools or required files then, as a blogger like me you need an attractive way for your blog posts to grab the attention of readers to the download section.

This CSS download button will do a great job for you! When someone hover by the mouse over DOWNLOAD then it will react as shown in the example below. Do you want to see a live demonstration? Here you go:

Example (1)

Download

Example (2)

Download

Click Here!

Implementing CSS Download Button

First of all, you will need Font Awesome icons supported by your blog template, it's so simple to implement just search for </head> and paste the following code ABOVE it:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Next, we need to put CSS code in its place, so if you are using Blogger then you may want to find ]]></b:skin> in your template and paste only ONE or more of the following CSS codes according to what you need ABOVE (or before) that skin closing tag.

Alternatively, for any platform including Blogger you can also just paste it anywhere before </head> tag in your page but, please put it between <style> (CSS CODE HERE) </style>.

Style (1)

/* Download Button (1) */ 
.downloadbutton {margin:0 auto;padding:20px 0;width:200px;}
.downloadbutton a {background:#fff;;color:#666;display:block;font-size:17px;font-weight:700;
font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;}
.downloadbutton a:hover {background:#ddd;}
.downloadbutton a:before {content:"\f019";font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.downloadbutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;
font-weight:bold;}

Style (2)

/* Download Button (2) */ 
.download-button {margin:20px auto;padding:0;width:auto;text-align:center;}
.download-inner {height:40px;display:inline-block;border:3px solid #8493A0;font-family:'Open Sans', sans-serif;font-size:20px;font-weight:400;text-align:center;text-decoration:none;
color:#f56954;overflow:hidden;border-radius:5px;}
a.download-inner {padding:0;margin:0;line-height:0;}
.download-inner .icon {margin-right:6px;}
.download-inner .download-front,.download-inner .download-backup {display:block;
padding:0 20px;line-height:40px;transition:margin .4s;}
.download-inner .download-front {background-color:#8493A0;color:#fff;}
.download-inner .download-backup {background-color:#fff;color:#8493A0;}
.download-inner:hover .download-front {margin-top:-40px;}

Adding Download Button to Articles

Well, you can now just use a simple HTML code to put it anywhere inside your posts, then you will have to change the URL of the target download page, of course.

Download Button (1)

<div class="downloadbutton">
<a href="https://www.ismoothblog.com/p/download.html" rel="nofollow" target="_blank">Download</a>
</div>

Download Button (2)

<div class="download-button">
<a class="download-inner" href="https://www.ismoothblog.com/p/download.html" rel="nofollow" target="_blank"><br />
<div class="download-front">
<span class="icon fa fa-cloud"></span> Download<br />
</div>
<div class="download-backup">
<span class="icon fa fa-hdd-o"></span> Click Here!<br />
</div>
</a><br />
</div>

That is all, you can also tweak the colors as you wish to match the template you are using, just play with the CSS code above and change hex values. If you need any help do not hesitate to ask in the comment section below.

iSmooth Blog