Simple Button Demo dan Download - Ok sudah cukup usang dalam beberapa hari ini aku jarang cek blog yang satu ini dan maaf jikalau aku terlambat menjawab semua komentar anda.
Kali ini aku akan membuatkan tips dan mencoba menjawab dari pertanyaan teman di blog ini, ok eksklusif saja
Memasang button menyerupai yang dipakai blog ini cukuplah mudah, anda hanya perlu menambahkan instruksi CSS dan HTML di bawah ini :
Sebelumnya anda sudah memasang font awesome pada template, jikalau 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 instruksi 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 memakai 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 instruksi yang aku tandai "#", selesai.
Hasilnya akan tampil menyerupai di bawah ini
Cukup gampang bukan, silahkan dikreasikan kembali dan selamat mencoba.
Source :