Cara Menciptakan Tombol Social Media Effect Hover

Social Buttons Hover - Sosial Media tidak lepas dari Blog atau Website , alasannya memilki kaitan cukup baik di antara keduanya ialah sanggup mendatangkan visitor gres dan meramaikan Blog atau website . Pada tombol sosial media berikut ini perpaduan dari Coloured Buttons  dengan full color menyebabkan tampilan menjadi menarik .

Demo   CODE

Caranya :

Anda cari kode ]]></b:skin> , kemudian salin css di bawah ini dan terapkan diatasnya

/*Social Buttons*?
.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
}

.col-1-12 {
    width: 8.3333%;
    *width: 8.3023%;
}

.col-1-6,
.col-2-12 {
    width: 16.6667%;
    *width: 16.6357%;
}

.col-1-4,
.col-3-12 {
    width: 25%;
    *width: 24.9690%;
}

.col-1-3,
.col-4-12 {
    width: 33.3333%;
    *width: 33.3023%;
}

.col-5-12 {
    width: 41.6667%;
    *width: 41.6357%;
}

.col-1-2,
.col-6-12 {
    width: 50%;
    *width: 49.9690%;
}

.col-7-12 {
    width: 58.3333%;
    *width: 58.3023%;
}

.col-2-3,
.col-8-12 {
    width: 66.6667%;
    *width: 66.6357%;
}

.col-3-4,
.col-9-12 {
    width: 75%;
    *width: 74.9690%;
}

.col-5-6,
.col-10-12 {
    width: 83.3333%;
    *width: 83.3023%;
}

.col-11-12 {
    width: 91.6667%;
    *width: 91.6357%;
}

.col-1,
.col-1-1,
.col-12-12 {
    width: 100%;
}

@media screen and (min-width: 35.5em) {
    .col-sm-1,
    .col-sm-1-1,
    .col-sm-1-2,
    .col-sm-1-3,
    .col-sm-2-3,
    .col-sm-1-4,
    .col-sm-3-4,
    .col-sm-1-6,
    .col-sm-5-6,
    .col-sm-1-12,
    .col-sm-2-12,
    .col-sm-3-12,
    .col-sm-4-12,
    .col-sm-5-12,
    .col-sm-6-12,
    .col-sm-7-12,
    .col-sm-8-12,
    .col-sm-9-12,
    .col-sm-10-12,
    .col-sm-11-12,
    .col-sm-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-sm-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-sm-1-6,
    .col-sm-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-sm-1-4,
    .col-sm-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-sm-1-3,
    .col-sm-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-sm-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-sm-1-2,
    .col-sm-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-sm-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-sm-2-3,
    .col-sm-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-sm-3-4,
    .col-sm-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-sm-5-6,
    .col-sm-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-sm-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-sm-1,
    .col-sm-1-1,
    .col-sm-12-12 {
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    .col-md-1,
    .col-md-1-1,
    .col-md-1-2,
    .col-md-1-3,
    .col-md-2-3,
    .col-md-1-4,
    .col-md-3-4,
    .col-md-1-6,
    .col-md-5-6,
    .col-md-1-12,
    .col-md-2-12,
    .col-md-3-12,
    .col-md-4-12,
    .col-md-5-12,
    .col-md-6-12,
    .col-md-7-12,
    .col-md-8-12,
    .col-md-9-12,
    .col-md-10-12,
    .col-md-11-12,
    .col-md-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-md-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-md-1-6,
    .col-md-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-md-1-4,
    .col-md-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-md-1-3,
    .col-md-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-md-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-md-1-2,
    .col-md-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-md-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-md-2-3,
    .col-md-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-md-3-4,
    .col-md-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-md-5-6,
    .col-md-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-md-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-md-1,
    .col-md-1-1,
    .col-md-12-12 {
        width: 100%;
    }
}

@media screen and (min-width: 64em) {
    .col-lg-1,
    .col-lg-1-1,
    .col-lg-1-2,
    .col-lg-1-3,
    .col-lg-2-3,
    .col-lg-1-4,
    .col-lg-3-4,
    .col-lg-1-6,
    .col-lg-5-6,
    .col-lg-1-12,
    .col-lg-2-12,
    .col-lg-3-12,
    .col-lg-4-12,
    .col-lg-5-12,
    .col-lg-6-12,
    .col-lg-7-12,
    .col-lg-8-12,
    .col-lg-9-12,
    .col-lg-10-12,
    .col-lg-11-12,
    .col-lg-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-lg-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-lg-1-6,
    .col-lg-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-lg-1-4,
    .col-lg-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-lg-1-3,
    .col-lg-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-lg-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-lg-1-2,
    .col-lg-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-lg-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-lg-2-3,
    .col-lg-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-lg-3-4,
    .col-lg-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-lg-5-6,
    .col-lg-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-lg-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-lg-1,
    .col-lg-1-1,
    .col-lg-12-12 {
        width: 100%;
    }
}

@media screen and (min-width: 80em) {
    .col-xl-1,
    .col-xl-1-1,
    .col-xl-1-2,
    .col-xl-1-3,
    .col-xl-2-3,
    .col-xl-1-4,
    .col-xl-3-4,
    .col-xl-1-6,
    .col-xl-5-6,
    .col-xl-1-12,
    .col-xl-2-12,
    .col-xl-3-12,
    .col-xl-4-12,
    .col-xl-5-12,
    .col-xl-6-12,
    .col-xl-7-12,
    .col-xl-8-12,
    .col-xl-9-12,
    .col-xl-10-12,
    .col-xl-11-12,
    .col-xl-12-12 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .col-xl-1-12 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .col-xl-1-6,
    .col-xl-2-12 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .col-xl-1-4,
    .col-xl-3-12 {
        width: 25%;
        *width: 24.9690%;
    }

    .col-xl-1-3,
    .col-xl-4-12 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .col-xl-5-12 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .col-xl-1-2,
    .col-xl-6-12 {
        width: 50%;
        *width: 49.9690%;
    }

    .col-xl-7-12 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .col-xl-2-3,
    .col-xl-8-12 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .col-xl-3-4,
    .col-xl-9-12 {
        width: 75%;
        *width: 74.9690%;
    }

    .col-xl-5-6,
    .col-xl-10-12 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .col-xl-11-12 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .col-xl-1,
    .col-xl-1-1,
    .col-xl-12-12 {
        width: 100%;
    }
}

div.grey{
 background: #EDEDEB;
}

div.white{
 background: #F4F5F0;
}

div.dark-grey{
 background: #4C4D4B;
}

div.green{
 background: #5CB86E;
}

.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  font-size: 22px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
  color: #666666;
  border: 2px #666666 solid;
  outline: none;
}

button:hover{
 color: #ffffff;
 background-color: #666666;
}

.blue {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue:hover {
  background-color: #55acee;
}

.green {
  color: #2ecc71;
  border: 2px #2ecc71 solid;
}

.green:hover {
  background-color: #2ecc71;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
 background-color: #9b59b6;
}

.orange {
 color: #e67e22;
 border: 2px #e67e22 solid;
}

.orange:hover {
 background-color: #e67e22;
}

.yellow {
 color: #f1c40f;
 border: 2px #f1c40f solid;
}

.yellow:hover {
 background-color: #f1c40f;
}

.twitter{
 color: #00aced;
 border: 2px solid#00aced;
}
.twitter:hover{
 background-color: #00aced;
}
.facebook{
 color: #3b5998;
 border: 2px solid #3b5998;
}
.facebook:hover{
 background-color: #3b5998;
}
.google{
 color: #dd4b39;
 border: 2px solid #dd4b39;
}
.google:hover{
 background-color: #dd4b39;
}
.pinterest{
 color: #cb2027;
 border: 2px solid #cb2027;
}
.pinterest:hover{
 background-color: #cb2027;
}
.linkedin{
 color: #007bb6;
 border: 2px solid #007bb6;
}
.linkedin:hover{
 background-color: #007bb6;
}
.youtube{
 color: #bb0000;
 border: 2px solid #bb0000;
}
.youtube:hover{
 background-color: #bb0000;
}
.vimeo{
 color: #aad450;
 border: 2px solid #aad450;
}
.vimeo:hover{
 background-color: #aad450;
}
.tumblr{
 color: #32506d;
 border: 2px solid #32506d;
}
.tumblr:hover{
 background-color: #32506d;
}
.instagram{
 color: #517fa4;
 border: 2px solid #517fa4;
}
.instagram:hover{
 background-color: #517fa4;
}
.flickr{
 color: #ff0084;
 border: 2px solid #ff0084;
}
.flickr:hover{
 background-color: #ff0084;
}
.dribbble{
 color: #ea4c89;
 border: 2px solid #ea4c89;
}
.dribbble:hover{
 background-color: #ea4c89;
}
.quora{
 color: #a82400;
 border: 2px solid #a82400;
}
.quora:hover{
 background-color: #a82400;
}
.foursquare{
 color: #0072b1;
 border: 2px solid #0072b1;
}
.foursquare:hover{
 background-color: #0072b1;
}
.forrst{
 color: #5B9A68;
 border: 2px solid #5B9A68;
}
.forrst:hover{
 background-color: #5B9A68;
}
.vk{
 color: #45668e;
 border: 2px solid #45668e;
}
.vk:hover{
 background-color: #45668e;
}
.wordpress{
 color: #21759b;
 border: 2px solid #21759b;
}
.wordpress:hover{
 background-color: #21759b;
}
.stumbleupon{
 color: #EB4823;
 border: 2px solid #EB4823;
}
.stumbleupon:hover{
 background-color: #EB4823;
}
.yahoo{
 color: #7B0099;
 border: 2px solid #7B0099;
}
.yahoo:hover{
 background-color: #7B0099;
}
.blogger{
 color: #fb8f3d;
 border: 2px solid #fb8f3d;
}
.blogger:hover{
 background-color: #fb8f3d;
}
.soundcloud{
 color: #ff3a00;
 border: 2px solid #ff3a00;
}
.soundcloud:hover{
 background-color: #ff3a00;
}

Selanjutnya Anda cari <div class='post-footer'>  atau <data:post.body/> , slin arahan dibawah ini dan pastekan di bawahnya .

<div class="col-1">
<button class="twitter">twitter</button>
<button class="facebook">facebook</button>
<button class="google">google</button>
<button class="pinterest">pinterest</button>
<button class="linkedin">linkedin</button>
<button class="youtube">youtube</button>
<button class="vimeo">vimeo</button>
<button class="tumblr">tumblr</button>
<button class="instagram">instagram</button>
<button class="flickr">flickr</button>
<button class="dribbble">dribbble</button>
<button class="quora">quora</button>
<button class="foursquare">foursquare</button>
<button class="forrst">forrst</button>
<button class="vk">vk</button>
<button class="wordpress">wordpress</button>
<button class="stumbleupon">stumbleupon</button>
<button class="yahoo">yahoo</button>
<button class="blogger">blogger</button>
<button class="soundcloud">soundcloud</button>
</div>

Simpan template

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/