Half Done CSS3 Animated custom like button for facebook

1 reply [Last post]

Fri, 2012-07-20 21:09

dizparate

Offline

newbie

Last seen: 8 years 31 weeks ago

Timezone: GMT+5

Joined: 2012-07-20

Posts: 2

Points: 3

No Images 100% css
i made it halfway and got bored
hopefully someone can make good use of it

<!DOCTYPE html>
<html>
<head>
 <style>
  .box{
   margin-right: auto;
   margin-left: auto;
   overflow:hidden;
   width:20px;
   height:20px;
   position: relative;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   transition: width 2s, padding 2s 2s;
   -webkit-transition: width 2s, padding 2s 2s;
   -moz-transition: width 2s, padding 2s 2s;
   -o-transition: width 2s, padding 2s 2s;
   position: relative;
  }
  .box:hover{
   background:grey;
   width: 60px;
   height:20px;
  }
  .qc{
   padding-left: 10px;
   width: 8px;
   height: 18px;
   background: #3B5998;
   position: absolute;
   left:0px;
   top: 0px;
   color: white;
   border: 1px solid grey;
  }
  .qct{
   padding-left: 10px;
   width: 8px;
   height: 18px;
   background: transparent;
   font-family: KlavikaBold-Plain;
   font-size: 17px;
   position: absolute;
   left:0px;
   top: 0px;
   color: white;
  }
  .hl{
   position: absolute;
   background: #6D84B4;
   width: 16px;
   height: 3px;
   bottom: 2px;
   left: 2px;
  }
  .btn{
   transition: background 2s, color 2s;
   -webkit-transition: background 2s, color 2s;
   -moz-transition: background 2s, color 2s;
   -o-transition: background 2s, color2;
   margin-left: 20px;
   padding-left:4px;
   height: 18px;
   width: 35px;
   background: grey;
   color: lightgrey;
   border-top: 1px solid grey;
   border-bottom: 1px solid grey;
  }
  .btn:hover{
   background: lightgrey;
   color: grey;
  }
  a{
   text-decoration:none;
  }
 </style>
</head>
<body><a href="#">
 <div class="box">
   <div class="btn" onclick="document.location.href='http://www.net.net';">Like </div>
   <div class="qc" onclick="document.location.href='http://www.example.com';"></div>
   <div class="hl">.</div>
   <div class="qct" onclick="document.location.href='http://www.example.com';"><b>f</b></div>
 </div></a>
</body>
</html>

Tags:

Styling CMS and Social Sites

Fri, 2012-07-20 21:14