Yuuk... Buat Tombol Result dengan Efek Hover di Blog

Halo kawan, Jika kawan sedang mencari Artikel tentang bagaimana Cara membuat Tombol Result dengan Efek Hover di Blogger. Kawan sangat tepat sekali, karna sudah mampir dipostingan ini.
iya, kali ini saya akan berbagi Cara membuat Tombol Result Efek Hover yang memiliki tampilan keren.

Sebenernya Apa sih Tombol Result ?
Untuk yang belum tau Tombol Result, Tombol Result adalah tombol yang fungsinya hampir sama seperti tombol Download, yaitu ketika diklik akan mengarah ke Link tujuan yang sudah tertanam di tombol tersebut.
Result = Hasil
Biasanya tombol ini digunakan untuk menampilkan Hasil apa yang kawan Posting, Misalnya kawan posting tentang Tutorial Cara membuat Script ini itulah.. 😁 untuk meyakinkan pengunjung Scriptnya masih bisa atau tidak.. maka kawan harus memperlihatkan Hasil dari Script tersebut.
Nah jika sudah begitu, kawan bisa menyertakan Tombol Result sebagai buktinya. Sudah paham kan?

Lalu bagaimana cara membuatnya ?
itu mudah, saya yakin pasti kawan bisa.
Silahkan ikuti langkah-langkah di bawah ini :

1. Login Blogger - Template - Edit HTML
2. Jika kawan sudah mempunyai Kode Font Awesome maka lewati langkah No.2, Tetapi jika belum mempunyai maka Simpan kode di bawah ini tepat sebelum kode </head>


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

3. Lalu Cari kode ]]></b:skin> atau </style> kemudian letakkan kode CSS di bawah ini sebelum kode tersebut.


#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;
}

Untuk kode pemanggilnya / cara menerapkannya, gunakan kode di bawah ini pada mode HTML ketika kawan membuat artikel/postingan di Blog.


    <div id="wrap">
    <a href="http://iqbalfp.blogspot.com/" class="btn-slide" target="_blank">
    <span class="circle">
    <i class="fa fa-rocket"></i>
    </span>
    <span class="title">Result</span>
    <span class="title-hover">Click here</span>
      </a></div>

Ganti http://iqbalfp.blogspot.com/ dengan Link tujuan kawan.

Result
Click here

Sekian Cara Membuat Tombol Result Dengan Efek Hover di Blogger, semoga bermanfaat untuk kawan semua.

Iqbal Fp

Yuuk... Buat Tombol Result dengan Efek Hover di Blog