» » » » Cara Membuat Sliding Hover Button

Cara Membuat Sliding Hover Button


Cara Membuat Sliding Hover Button  – Button atau tombol yang bisa di klik mempunyai banyak kegunaan. Efek sliding (geser) yang ada pada button ini mirip dengan menu Rocking Rolling Rounded dengan jquery yang dulu pernah saya posting. Sobat dapat menggunakan button ini untuk tombol download, subscribe by email atau lainnya, terserah keperluan masing-masing.
hover button
Cara Membuat Button dengan Efek Sliding Hover

  1. Login ke dashboard blogger Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
  4. Backup dulu template anda sebelum melakukan editing.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

    .a-btn{
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:20px;
    padding-right:80px;
    height:38px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
    }
    .a-btn-text{
    padding-top:8px;
    display:block;
    font-size:18px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#446388;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
    }
    .a-btn-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:18px;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height:38px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
    }
    .a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    }
    .a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaHCesgpX4b_9eVpMtJ16bEHzDt2HCxoLA4q86B8eHDoFuX4cHI2v3547PMxQYqn-uPkrYW68lediSCbVFIymfnrWuMjFEVf21tNGwP8gmKefXWcI2zYjM1gh_SSulw3fGK57MKfB_n0/s1600/arrow_right.png) no-repeat 50% 55%;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
    }
    .a-btn:hover{
    padding-right:180px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    }
    .a-btn:hover .a-btn-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
    }
    .a-btn:hover .a-btn-slide-text{
    width:100px;
    }
    .a-btn:hover .a-btn-icon-right span{
    opacity:1;
    }
    .a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
    }

  6. Kemudian pilih menu Layout, klik Add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya (pilih salah satu saja) :

    <div class="button-wrapper">
    <a href="Button URL" class="a-btn">
    <span class="a-btn-text">Register now</span>
    <span class="a-btn-slide-text">It's free!</span>
    <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="Button URL" class="a-btn">
    <span class="a-btn-text">Become a member</span>
    <span class="a-btn-slide-text">Sign up!</span>
    <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="Button URL" class="a-btn">
    <span class="a-btn-text">Enter</span>
    <span class="a-btn-slide-text">Log in!</span>
    <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="Button URL" class="a-btn">
    <span class="a-btn-text">Get an account</span>
    <span class="a-btn-slide-text">For free!</span>
    <span class="a-btn-icon-right"><span></span></span>
    </a>
    </div>
    Keterangan :

    Ganti tulisan "Button URL"; >> dengan link URL yang Anda tuju.

  7. Setelah itu save templates anda, jika ingin meletakkan button di dalam postingan sobat dapat langsung mengcopy kode button dan meletakkannya didalam area posting tanpa perlu di parse :

    <div class="button-wrapper">
          <a href="Button URL" class="a-btn">
          <span class="a-btn-text">Register now</span>
          <span class="a-btn-slide-text">It's free!</span>
          <span class="a-btn-icon-right"><span></span></span>
          </a>    
    </div>
    Terakhir save dan lihat hasilnya.

Semoga Cara Membuat Sliding Hover Button ini bermanfaat !

0 Komentar untuk "Cara Membuat Sliding Hover Button"