Animated +1 button
I've created this a few weeks ago but I decided to let it inactive for a while and recently someone told me suggested me to post it as it looked nice so I posted it here. As you can see, the markup used is very light, I placed a div #backbut to create this carbon-fiber effect, with rounded borders using border-radius. Then we have the the #fav div which is for the button.
This #fav div contain a link (❤) and a p element (+1). The p element is hidden by setting color:transparent;, and it is placed 50px over its original position to achieve a cool slide down effect when the mouse is hovered over the button. The "rainbow-border" is created with box-shadow, and all colors are moving and change width when the mouse is :hover. When you :hover the heart, it turns red to notify that it active, and click to move up the heart and display with transition the mention "+1".