Simple Button Demo and Download

Simple Button Demo and Download
Simple Button Demo and Download - Ok it's been a while in a few days I rarely check this one blog and I'm sorry if I'm late answering all your comments.

This time I will share tips and try to answer from friends' questions on this blog, just go straight ahead

Installing a button like the one used by this blog is quite easy, you just need to add the CSS and HTML code below:

Previously you have installed an awesome font on the template, if not please add the link below before </head>


<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>


Open Template> Edit HTML> Apply the code below before </style>


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

.whitebutton 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;
}

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

.whitebutton 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;
}

.whitebutton .up {
background: #e25734;
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: #aaa;
}

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

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

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

.whitebuttondemo a {
background: #e25734;
color: #fff;
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;
transition: 350ms;
}

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

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

.whitebuttondemo 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;
}

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

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

1. For those who use Use tags <br>

Apply the following HTML in the post on the HTML tab (not compose)


<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</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 begin</span><br>
<span class="down">1.6MB .rar</span></div>

2. For those who use Press "Enter" for a new line

Apply the following HTML in the post on the HTML tab (not compose)



<div class="whitebuttondemo">
<a href="#">Demo</a>
<span class="up">click to begin</span>
</div>

<div class="whitebutton">
<a href="#">Download</a>
<span class="up">click to begin</span>
<span class="down">1.6MB .rar</span>
</div>

Then fill in your link link in the code that I marked "#", finished.

Easy enough, right, please re-create and good luck.

Post a Comment

Previous Post Next Post