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.
Untuk tampilannya lihat demo dibawah ini :
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.
dengan URL yang akan anda masukkan di postingan blog.
.jpg "widget label metro")
