CSS only animation effect on hover of these simple but fun social buttons.
A Pen by Stephen Burgess on CodePen.
<a href="http://twitter.com/minimalmonkey" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a> | |
<a href="http://facebook.com" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a> | |
<a href="http://plus.google.com" class="icon-button google-plus"><i class="icon-google-plus"></i><span></span></a> |
// Uses rem for size so go ahead and change the font-size of html and see the buttons get bigger (or smaller...) :) |
html { | |
font-size: 20px; | |
} | |
body { | |
background-color: #ccc; | |
padding: 50px; | |
text-align: center; | |
} | |
/* Wrapper */ | |
.icon-button { | |
background-color: white; | |
border-radius: 3.6rem; | |
cursor: pointer; | |
display: inline-block; | |
font-size: 2.0rem; | |
height: 3.6rem; | |
line-height: 3.6rem; | |
margin: 0 5px; | |
position: relative; | |
text-align: center; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
width: 3.6rem; | |
} | |
/* Circle */ | |
.icon-button span { | |
border-radius: 0; | |
display: block; | |
height: 0; | |
left: 50%; | |
margin: 0; | |
position: absolute; | |
top: 50%; | |
-webkit-transition: all 0.3s; | |
-moz-transition: all 0.3s; | |
-o-transition: all 0.3s; | |
transition: all 0.3s; | |
width: 0; | |
} | |
.icon-button:hover span { | |
width: 3.6rem; | |
height: 3.6rem; | |
border-radius: 3.6rem; | |
margin: -1.8rem; | |
} | |
.twitter span { | |
background-color: #4099ff; | |
} | |
.facebook span { | |
background-color: #3B5998; | |
} | |
.google-plus span { | |
background-color: #db5a3c; | |
} | |
/* Icons */ | |
.icon-button i { | |
background: none; | |
color: white; | |
height: 3.6rem; | |
left: 0; | |
line-height: 3.6rem; | |
position: absolute; | |
top: 0; | |
-webkit-transition: all 0.3s; | |
-moz-transition: all 0.3s; | |
-o-transition: all 0.3s; | |
transition: all 0.3s; | |
width: 3.6rem; | |
z-index: 10; | |
} | |
.icon-button .icon-twitter { | |
color: #4099ff; | |
} | |
.icon-button .icon-facebook { | |
color: #3B5998; | |
} | |
.icon-button .icon-google-plus { | |
color: #db5a3c; | |
} | |
.icon-button:hover .icon-twitter, | |
.icon-button:hover .icon-facebook, | |
.icon-button:hover .icon-google-plus { | |
color: white; | |
} |
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet" /> |