Pure Css Social Button Hover

• Copy / Paste Kode Css di bawah ini,  Tepat di atas kode ]]></b:skin>

.circle
{
  width:60px;
  height:60px;
  border-radius:50%;
  position: absolute;
  right: 50%;
  margin-right: -30px;
  bottom: 10px;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  -ms-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.first_circle
{
  background-color:#db4531;
  box-shadow: 2px 2px 8px #999999; 
  z-index: 3;
}
.second_circle
{
  z-index: 2;
  background-image: url(YOUR-URL-IMAGE.png);
  background-size: cover;
}
.third_circle
{
  z-index: 1;
  background-image: url(YOUR-URL-IMAGE.png);
  background-size: cover;
}
.contener_circle:hover .second_circle
{
  box-shadow: 2px 2px 8px #999999;
  bottom:75px;
}
.contener_circle:hover .third_circle
{
  box-shadow: 2px 2px 8px #999999;
  bottom:140px;
}
.contener_circle
{
  height: 70px;
  width: 60px;
}
.contener_circle:hover
{
  height: 200px;
  width: 60px;
}

• Dan Kamu Copy kode di bawah ini, dan tempatkan di mana pun yang kamu inginkan...

<div align="center" style="height:200px;position:relative;">
  <div class="contener_circle">
    <div class="circle first_circle">
       <img src="YOUR-URL-IMAGE.png">
    </div>
      <div class="circle second_circle">&nbsp;</div>
      <div class="circle third_circle">&nbsp;</div>
  </div>
</div>

Share :

Tweet

✚

Related Post