Cara Membuat Tombol Demo pada Blog

Pada kesempatan ini, admin mau kasih tutorial cara membuat tombol demo pada blog. Tombol demo ini bermanfaat untuk kamu yang memiliki blog dengan tema tutorial.

Silahkan bisa cek demo nya di bawah ini

• Demo Link

1. Login blog > Tema/Template > Edit HTML > Cari kode ]]></b:skin> atau </style> > copy kode di bawah ini dan letakan tepat di atas 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 #884c80;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #884c80;
}

.btn-slide:hover {
    background-color: #884c80;
}

.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: #884c80;
}

.btn-slide2:hover span.circle2 {
    color: #884c80;
}

.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: #884c80;
    color: #fff;
    position: absolute;
    float: left;
    margin: 2px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #884c80;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 60px;
    text-align: center;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    color: #884c80;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #884c80;
    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;
}

2. Simpan

3. Postingan > pilih menu HTML (BUKAN COMPOSE) > Salin kode di bawah ini dan ganti dengan link yang akan dituju.

<div id="wrap">
<a href="#" class="btn-slide">
  <span class="circle"><i class="fas fa-sync"></i></span>
  <span class="title">Klik Demo</span>
  <span class="title-hover">Klik Disini</span>
</a></div>

4. Ganti tanda '#' dengan link tujuan kamu

Sumber : arlinadzgn.com