CARA MEMBUAT TOMBOL SIMPLE BUTTON DAN DONLOAD

Kali ini Saya akan Berbagi Tips Membuat Tombol Simple Button dan Donload.
Jika Anda ingin Memasang Button seperti di gambar ini anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :

Jika sebelumya anda sudah memasang font Awesome pada Template , jika belum silahkan tambahkan link ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/

font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Buka Template > Edit HTML > Terapkan Kode CSS di Bawah ini sebelum Kode </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);
}

👉 Bagi yang Menggunakan ''Gunakan tag''
terapkan HTML berikut di Postingan tab HTML ( Bukan Compuse )

<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>

👉 Bagi yg menggunakan '' TEKAN ENTER '' untuk Baris baru silahkan tempelkan HTML berikut di Postingan tab HTML ( Bukan 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>

👉 Isikan Link Tautan Pada Kode yang berwarna merah dengan Link Tujuan.

Slesai.

Selamat Mencoba , Semoga Artikel ini bermanfa'at untuk Anda semua.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.

irinmedia

CARA MEMBUAT TOMBOL SIMPLE BUTTON DAN DONLOAD

More posts

Comments