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