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.
Created
April 1, 2015 03:02
-
-
Save anonymous/9699e3ffb044bc2014d2 to your computer and use it in GitHub Desktop.
Stylish Social Buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .social-buttons | |
| each name in ['facebook','twitter','google','dribbble','skype'] | |
| a.social-button(href="#",class=name): i.fa(class="fa-"+name) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Not a damn thing |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment