Fri, 2012-07-20 21:09
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>