» » CARA MEMBUAT Social Link Hover "Hinge" Effect DI BLOGSPOT

CARA MEMBUAT Social Link Hover "Hinge" Effect DI BLOGSPOT

Ivankgribatako
Add Comment
WIDGET
Kamis, 31 Desember 2015

Social Link Hover "Hinge" Effect FOR BLOGGER




*  login dulu
*  klik template >>> edit HTML
*  cari kode ]]></b:skin>
*  copy kode dibawah dan letakkan diatas kode ]]></b:skin>
/*Facebook Hover Link */

div.facebook {font-family: "Arial";
background-color: #3b5999;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
  
}


div.facebook:hover {font-family: "Arial";
background-color: #3b5999;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 100ms linear;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transform: translate(0px, 10px) rotate(-30deg);
-moz-transform: translate(0px, 10px) rotate(-30deg);
-ms-transform: translate(0px, 10px) rotate(-30deg);
-o-transform: translate(0px, 10px) rotate(-30deg);
transform: translate(0px, 10px) rotate(-30deg);
}


div.facebook:active {font-family: "Arial";
background-color: #3b5999;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}

/* Youtube's Hover Link */

div.youtube {font-family: "Arial";
background-color: #FF3333;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}


div.youtube:hover {font-family: "Arial";
background-color: #FF3333;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 100ms linear;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transform: translate(0px, 10px) rotate(-30deg);
-moz-transform: translate(0px, 10px) rotate(-30deg);
-ms-transform: translate(0px, 10px) rotate(-30deg);
-o-transform: translate(0px, 10px) rotate(-30deg);
transform: translate(0px, 10px) rotate(-30deg);
}


div.youtube:active {font-family: "Arial";
background-color: #FF3333;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}

/* Codepen's Hover Link */

div.codepen {font-family: "Arial";
background-color: #303030;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}


div.codepen:hover {font-family: "Arial";
background-color: #303030;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 100ms linear;
-moz-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transform: translate(0px, 10px) rotate(-30deg);
-moz-transform: translate(0px, 10px) rotate(-30deg);
-ms-transform: translate(0px, 10px) rotate(-30deg);
-o-transform: translate(0px, 10px) rotate(-30deg);
transform: translate(0px, 10px) rotate(-30deg);
}


div.codepen:active {font-family: "Arial";
background-color: #303030;
color: white;
text-align: center;
padding: 11px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
  transition: all 200ms linear;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
}
a {color: white; text-decoration: none;}

/*Facebook's Background on Hover */ 
th.facebook {background-color: #1C2B4A;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;
}

/* YouTube's Background On Hover */
th.youtube {background-color: #691515;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;
}

/* Codepen's Background On Hover */
th.codepen {background-color: #191919;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px black;
box-shadow: inset 0 0 20px black;
-moz-box-shadow: inset 0 0 20px black;
-o-box-shadow: inset 0 0 20px black;
-ms-box-shadow: inset 0 0 20px black;

}
*  kemudian tambahkan kode di bawah ke dalam html/javascript
<center>
    <table cellspacing="10">
      <tr>
        <th class="facebook" width="33%">
          <a href="#">
          <div class="facebook">
            Facebook
          </div>
          </a>
        </th>
        
        <th class="youtube" width="33%">
          <a href="#">
          <div class="youtube">
            YouTube
          </div>
          </a>
        </th>
        
        <th class="codepen" width="33%">
          <a href="#">
          <div class="codepen">
            Codepen
          </div>
          </a>
        </th>
        
      </tr>
    </table>
  </center>
>>> CATATAN <<<
        [ Ganti warna merah dengan url link anda ]
*  terakhir silahkan di save

 ****  GOOD LUCK  ****

Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)