Membuat Tombol Slide Demo Dan Download Keren

Membuat Tombol Slide Demo dan Download Keren

Banyak tombol demo dan download yang bersebaran di dunia online, sudah tau gitu kenapa admin masih posting perihal tombol live demo dan download? ini alasannya ialah aku ingin share riquest dari salah satu members yang menginginkan tombol live demo dan download keren.

Jika tertarik memakai tombol slide demo & download ibarat di atas silahkan ikuti tutorialnya hingga selesai.

1. Sobat harus memasang Font Awesome Icons diblog sobat, namun bila sudah ada lewati langkah ini. Untuk memasangnya silahkan copy instruksi berikut sempurna sebelum atau di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Copy CSS berikut di atas kode ]]></b:skin> atau </style>

/*CSS DEMO dan DOWNLOAD ---- http://wajahilmu.blogspot.com*/ #wrap{margin:20px auto;text-align:center} #wrap br{display:none} .btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s} .btn-slide2{border:2px solid #efa666} .btn-slide:hover{background-color:#0099cc} .btn-slide2:hover{background-color:#efa666} .btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc} .btn-slide2:hover span.circle2{color:#efa666} .btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0} .btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px} .btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%} .btn-slide2 span.circle2{background-color:#efa666} .btn-slide span.title,.btn-slide span.title-hover,.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:#efa666;left:80px} .btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0} .btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff}

3. Klik Save

Untuk Cara Penggunaan

Cara penggunaannya sih sangatlah mudah, terlebih dahulu ubah Compose menjadi HTML pada post sobat. Setelah itu masukkan instruksi berikut di kawasan yang sahabat inginkan.

• Demo

<div id="wrap"> <a href="#" class="btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Click here</span> </a> <a href="#" class="btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">Click here</span> </a> </div>

Berikut Demo Tampilannya

Source : https://rodamotiv.blogspot.com//search?q=memasang-slide-demo-dan-download-button