Selamat membaca, kali ini umin ingin membagikan button Download yang ada di blog ini, Kode CSS, dan juga pemanggil HTML ini adonan dari whitebutton dan juga button slideshow (Kalo ga salah) yang tutorialnya diberikan oleh mba Arlina.
Mungkin pembaca ada ketertarikan sendiri, silahkan dicoba ya :) dan mungkin ada kode-kode yang tidak ada efeknya, umin minta maaf alasannya yaitu umin belum begitu paham mengenai kode-kode nya 😁
- Pertama Masukkan instruksi css dibawah ini sebelum </style>
#wrap { margin: 20px auto; text-align: center; } #wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 5px 5px 0 0; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #005eff; } .btn-slide2:hover { background-color: #005eff; } .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #005eff; } .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide2 span.circle2 { display: block; background-color: #005eff; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 5px; } .btn-slide2 span.circle2 { background-color: #005eff; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #005eff; left: 80px; } .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide2 span.title-hover2 { color: #fff; } .btn-slide2 span.up { border: 2px solid #005eff; color: #005eff; 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; } .btn-slide2 span.up { border: 2px solid #005eff; margin: 52px -2px; border-top:0; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-45px); transition: 350ms; } .btn-slide2:hover span.up { opacity: 1; transform: translate(0,0); } - Masukkan instruksi dibawah ini di postingan HTML bukan COMPOSE
<div id="wrap"> <a class="btn-slide2" href="LINK TUJUAN" target="_blank"> <span class="circle2"><i class="fa fa-d0wnl0ad"></i></span> <span class="title2">Download</span> <span class="title-hover2">Klik Disini</span> <span class="up"> Ukuran File : 261.94Kb </span> </a> </div>Ganti ukuran file sesuai yang dibutuhkanCukup sekian dari saya, Terima Kasih untuk Mba Arlina yang telah membagikan ilmunya :)
DEMO
EmoticonEmoticon