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 :
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); }
- 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>
- Bagi yang menggunakan Tekan "Enter" untuk baris baru
<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>
[ Read More... ]
