Cara Membuat Tombol Result Dengan Efek Hover di Blogger

Saya mau berbagi tips blogger yaitu membuat tombol result. Tombol result ini kurang lebih sama saja dengan tombol download yang bertujuan jika di klik tombol tersebut maka akan diarahkan ke link tujuan yang sudah tertanam pada tombol tersebut.

• Demo

Berikut simak caranya

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

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

4. Simpan Template

Jangan lupa untuk menyisip kan kode Font Awesome pada blog anda bila belum terpasang Font Awesome

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

Untuk kode pemanggilnya gunakan kode di bawah ini pada mode HTML artikel anda

<div id="wrap">
<a href="#" 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>

Sekian tutorial kali ini semoga bermanfaat.