Button Download - Untuk kali ini saya akan berbagi tutorial bagaimana cara membuat button download di blog. Button download ini termasuk responsive, karena ada animasi yang tertanam di dalam button download tersebut. Jadi pengunjung akan merasa nyaman jika melihat button tersebut. Dan untuk lebih jelasnya silahkan perhatikan tutorial berikut.
.download {
position: relative;
overflow: hidden;
text-align: center;
margin: 2em auto;
width: 100%;
height: 60px;
line-height: 60px;}
.download h1 {
position: absolute;
color: #fff;
font: 0.6em;
line-height: 60px;
margin: 0;
padding: 0;
width: 100%;
background-color: #4f2c68;
transition: margin-left .6s cubic-bezier(.1, .7, .2, 1);}
.download:hover h1{
margin-left: 98%;}
.download ul {
display: inline-block;
margin: 0;
padding: 0;}
.download ul li {
position: static;
display: inline-block;
padding: 0 .2em;}
.download ul li::before {
display: none;
}
.download ul li a {
color: #fff;
font-size: 1.4em;
margin: 0;
padding: .3em .6em;
background: none;}
.download-info{
background: #16a085;}
.download-info h1{
background-color: #1abc9c;}
.download-danger{
background: #e67e22;}
.download-danger h1{
background-color: #f39c12;}
.download-success{
background: #27ae60;}
.download-success h1{
background-color: #2ecc71;}
.download-warning{
background: #8e44ad;}
.download-warning h1{
background-color: #9b59b6}
Masukan code HTML berikut di postingan blog anda.
<div class="download download-info">
<h1>
<i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=2051036194919776891#">Terserah anda</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2051036194919776891#">Terserah anda</a></li>
</ul>
</div>
<h1>
<i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=2051036194919776891#">Terserah anda</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2051036194919776891#">Terserah anda</a></li>
</ul>
</div>
Terimakasih atas kunjungan anda, jika tidak mengerti, silahkan berkomentar.
0 comments:
Post a Comment