Simple Button Demo dan Download

11/05/2014

Simple Button Demo dan Download - Ok sudah cukup lama dalam beberapa hari ini saya jarang cek blog yang satu ini dan maaf jika saya terlambat menjawab semua komentar anda.

Kali ini saya akan berbagi tips dan mencoba menjawab dari pertanyaan teman di blog ini, ok langsung saja

Memasang button seperti yang digunakan blog ini cukuplah mudah, anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :


Sebelumnya anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah 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 di bawah ini sebelum </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. Bagi yang menggunakan Gunakan tag <br>

Terapkan HTML berikut di postingan pada tab HTML (bukan 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. Bagi yang menggunakan Tekan "Enter" untuk baris baru

Terapkan HTML berikut di postingan pada 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>

Kemudian isikan link tautan anda pada kode yang saya tandai "#", selesai.

Hasilnya akan tampil seperti di bawah ini

Demo
click to view

Download
click to begin
1.6MB .rar



Cukup mudah bukan, silahkan dikreasikan kembali dan selamat mencoba.


Source : http://arlinadesign.blogspot.com/2014/11/simple-button-demo-dan-download.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

28 comments

akhirnya dibagiin ^_^ thanks

Balas

ternyata ukurannya ditulis manual.. saya kira otomatis hehe..

Balas

iya ditulis manual

Balas

tulisan yg keluar ketika disentuh button cuma ukurannya saja, click to view dan click to begin tidak muncul mbak?

Balas

mungkin parent dari kode span dan tablenya berbeda cb diatur posisinya lewat inspect element

Balas

akhirnya permintaan yang kemaren udah saya buat

Balas

Thanks Arlina :)

Balas

Buka Template > Edit HTML > Terapkan kode di bawah ini sebelum "style"?

bukan "style" harusnya diatas ]]> -_-"

Balas

sama saja, intinya kode CSS bisa di pasang sebelum

</style>

atau

]]></b:skin>

Balas

Pertanyaan saya dijawab juga dalam postingan ini :D Terima kasih sangat

Balas

Keren Abizzzz!!!! Izin coba ya mbak buat di blogku :D

Balas

oh iya mbak arlina kalo syntax highligternya boleh di share bilang bilang ya :) bagus soalnya hehe

Balas

ok, mungkin nanti di share

Balas

tanya mba? itukan disuruh masukin kode di html sebelum kode "</style". masalahnya di html ada 5 kode "</style". itu gimana mab?

Balas

di style yg tidak terbungkus tag kondisional.

Balas

mbak kalau backgroundnya dijadiin gelap dan teksnya putih gimana caranya?

Balas

warna pada cssnya diganti

Balas

maaf admin share dong simple button demo dan download yg sekarang di pakai please :)

Balas

masih belum fix, sk berubah tampilannya kl pindah ke tab compose

Balas

yah.. oke min ane tunggu trus jangan menyerah min :)

Balas
This comment has been removed by the author.

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.