A few cool social buttons with smooth animations. Inspired by https://dribbble.com/shots/1983177-Retina
To see how this was made, check this blog post out! http://deacy.io/blog/stylish-social-media-buttons/
A Pen by Chris Deacy on CodePen.
.social-buttons | |
each name in ['facebook','twitter','google','dribbble','skype'] | |
a.social-button(href="#",class=name): i.fa(class="fa-"+name) |
# Not a damn thing |
//animations | |
$transition: all 0.35s cubic-bezier(0.310, -0.105, 0.430, 1.590); | |
//social media colors | |
$colors: ( | |
"facebook": "#3B5998", | |
"twitter": "#3CF", | |
"google": "#DC4A38", | |
"dribbble": "#F26798", | |
"skype": "#00AFF0" | |
); | |
//button size | |
$size: 90px; | |
* { | |
margin: 0; | |
padding: 0; | |
color: inherit; | |
box-sizing: inherit; | |
&:focus { | |
outline: none; | |
} | |
} | |
html { | |
box-sizing: border-box; | |
} | |
body { | |
background-color: #ecf0f1; | |
} | |
.social-buttons { | |
height: $size; | |
margin: auto; | |
font-size: 0; | |
text-align: center; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.social-button { | |
display: inline-block; | |
background-color: #fff; | |
width: $size; | |
height: $size; | |
line-height: $size; | |
margin: 0 10px; | |
text-align: center; | |
position: relative; | |
overflow: hidden; | |
//overflow bug fix | |
opacity: .99; | |
border-radius: 28%; | |
box-shadow: 0 0 30px 0 rgba(0,0,0,.05); | |
transition: $transition; | |
&:before { | |
content: ''; | |
background-color: #000; | |
width: 120%; | |
height: 120%; | |
position: absolute; | |
top: 90%; | |
left: -110%; | |
transform: rotate(45deg); | |
transition: $transition; | |
} | |
.fa { | |
font-size: 38px; | |
vertical-align: middle; | |
transform: scale(.8); | |
transition: $transition; | |
} | |
@each $class,$color in $colors { | |
&.#{$class} { | |
&:before { | |
background-color: #{$color}; | |
} | |
.fa { | |
color: #{$color}; | |
} | |
} | |
} | |
&:hover { | |
&:before { | |
top: -10%; | |
left: -10%; | |
} | |
.fa { | |
color: #fff; | |
transform: scale(1); | |
} | |
} | |
&:focus { | |
opacity: .85; | |
} | |
} |