Button Icon Unik Dengan Animasi CSS3

Button Icon Unik Dengan Animasi CSS3 - Button icon biasanya berupa link yang mengarah ke link yang lain, baik link download, demo dan sebagainya. Blogger memberikan fitur insert link secara default hanyalah berupa tulisan saja, sehingga kesannya kurang terlihat menarik jika yang kita masukkan adalah link - link seperti download, preview, dan demo. Nah seperti widget unik sebelumnya saya akan mencoba memberikan tips blog membuat  click icon ( Button Icon ) dengan efek animasi shine, tentunya agar tampilan postingan kita terlihat lebih cantik dan menarik.


Udah lihat kan..??? OK mari kita lanjutkan untuk cara pemasangan di postingan blog.
Masuk ke Edit Template >> Expand Template ( CTRL+A, CTRL+C, DEL, CTRL+V )
kemudian masukkan code CSS dibawah ini sebelum kode [[ </b:skin>

.sam_button_icon {
    height:2em;
    padding:15px 50px;
    margin:20px 40px;
    cursor:pointer;
    display:inline-block;
    color:#FFF !important;
    font-size:1em;
    border:1px solid #eee;
    background:#eee;
    border-radius:4px;
    line-height:2em;
    border:1px solid #aaa;
    text-decoration:none;
    -webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

.green{
    background: #008000; /* Old browsers */
    background: -moz-linear-gradient(top, #008000 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008000), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #008000 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #008000 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #008000 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #008000 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.red{
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff3019 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff3019 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff3019 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #ff3019 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.indigo{
    background: #4B0082; /* Old browsers */
    background: -moz-linear-gradient(top, #4B0082 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4B0082), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4B0082 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4B0082 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4B0082 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #4B0082 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4B0082', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.orange{
    background: #FFA500; /* Old browsers */
    background: -moz-linear-gradient(top, #FFA500 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA500), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #FFA500 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #FFA500 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #FFA500 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #FFA500 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFA500', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.lightseagreen{
    background: #20B2AA; /* Old browsers */
    background: -moz-linear-gradient(top, #20B2AA 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#20B2AA), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #20B2AA 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #20B2AA 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #20B2AA 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #20B2AA 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20B2AA', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.navy{
    background: #000080; /* Old browsers */
    background: -moz-linear-gradient(top, #000080 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000080), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #000080 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #000080 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #000080 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #000080 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000080', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.sam_button_icon:hover{
    -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
.sam_button_icon:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
}
.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
}
.sam_button_icon:hover .light{
    padding:1px 5px;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}
@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}
@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}
@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}
@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}

Kemudian Save Template.

Cara pemasangan di postingan blog silakan masuk pada HTML dan masukkan kode dibawah ini, dan pilihlah kode sesuai dengan warna yanga akan ditampilkan.

 Green 

<a class="sam_button_icon green" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Red 

<a class="sam_button_icon red" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Indigo 

<a class="sam_button_icon indigo" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Orange 

<a class="sam_button_icon orange" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 LightseaGreen 

<a class="sam_button_icon lightseagreen" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Navy 

<a class="sam_button_icon navy" href="#">
<div class="light"></div>Virlyz Nyzam</a>

Note : Ganti tanda # dan Tulisan Virlyz Nyzam dengan URL yang akan anda masukkan di postingan blog.
Untuk mengatur posisi tampilan ditengah - tengah tambahkan kode <div style="text-align: center;"> diikuti </div> pada akhir code, jadi kodenya menjadi seperti ini :

<div style="text-align: center;">
<a class="sam_button_icon lightseagreen" href="#">
<div class="light"></div>Virlyz Nyzam</a></div>

Dan akhirnya sekian dulu tips widget unik blog untuk kali ini semoga bermanfaat, dan Salam Blogger

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit