How To Make Cool Button On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

In this time article I will share "How To Make Cool Button On Blogger".
You certainly need this tutorial, especially for those of you a Blogger blogging tutorial coding field or who are blogging in the field of software providers or applications can be downloaded by visitors to your blog.

In the default template Blogger is not equipped with a cool button for the default template Blogger is still raw and very simple, therefore you should strive to build and install itself on your blog template. But at some premium templates or templates that you download for free on the site Blogger templates provider, sometimes equipped with a cool button even with a very simple view only with color and border decoration only. I am sure that you are not satisfied with the key that comes on that template, therefore I will give you an alternative to the Blogger blogging tutorial coding field or who are blogging in the field of software providers or application.

Here are the key features of cool that I share with you at this time:
1. Beautiful, with styles, colors and animation.
2. Lightweight, only raised with CSS and HTML that is not burdensome and does not interfere with the activity of the blog.
3. Responsive device display Desktop, Tablet and Mobile.
4. Easy to use with simple HTML and very light.

Before to tutorial, it would be nice if you see the first results of the following⇩

Result
Click To View

If you are interested, let to tutorial⇨

1. Put the following CSS above / before the ]]></b:skin> tags⇩

/***************************************
Cool Button By www.BloggerDiscreet.com
***************************************/
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #00cc00;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Open Sans',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #009900;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Open Sans', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #006600;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #00e600;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttonresult {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttonresult a {
    background: #006600;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Open Sans',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttonresult a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttonresult a:hover {
    color: #fff;
}

.whitebuttonresult span {
    background: #009900;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Open Sans', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttonresult .up {
    background: #009900;
    margin: -29px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttonresult:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

2. Use the following HTML into your post⇩

<div class="whitebuttonresult">
<a href="#" target="_blank">Result</a><br>
<span class="up">Click To View</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">Click To Download</span><br>
<span class="down">14.7MB .rar</span></div>

Note: Please replace the # with the link of your destination.

Alhamdulillaah, tutorial is ready.