Create a professional Download button with just CSS3

 A few days ago I shared with you a Button. Today continue to bring you a professional Download button with only very good quality CSS3!

If you have a Blogspot page that regularly has to share download links, creating a download button is quite important. The download button prominently contributes to attracting the attention of the reader.

Download button HTML code for Blogger

This article will share 1 download button using css3 effect and absolutely no javascript to slow down your website.

You can see the demo download button here:

First login to the admin page and paste the following code in front of the ]]> </ b: skin> tag 

.buttondownload3, .buttondownload3: hover {color: #fff! important}

.buttonDownload3 {display: inline-block; position: relative; padding: 13px 20px 13px 25px; background: # 2187e7; font-family: times; text-decoration: none; font-size: 16px; font-weight: 600; text -align: center; text-indent: 15px; border-radius: 5px}

.buttonDownload3: hover {opacity: .9}

.buttonDownload3: before, .buttonDownload3: after {content: ''; display: block; position: absolute; left: 15px; top: 52%}

.buttonDownload3: before {width: 10px; height: 2px; border-style: solid; border-width: 0 2px 2px}

.buttonDownload3: after {margin-left: 1px; margin-top: -7px; border-style: solid; border-width: 4px 4px 0; border-color: transparent; border-top-color: inherit; animation: downloadArrow. 7s linear infinite; animation-play-state: paused}

.buttonDownload3: hover: before {border-color: #fff}

.buttonDownload3: hover: after {border-top-color: #fff; animation-play-state: running}

@keyframes downloadArrow {0% {margin-top: -7px; opacity: 1} 0.001% {margin-top: -15px; opacity: 0} 50% {opacity: 1} 100% {margin-top: 0; opacity: 0}}

There may be a few small deviations in CSS, you can adjust it to suit each template layout you are using.

When you want to use this button, you just need to switch HTML mode and paste this HTML

<center> <a href=" # "class="buttonDownload3" title="Click Here"> DOWNLOAD </a> </center>

Replace the download link in position #

Very simple, right, wish you success!