Stylish Social Buttons

index.pug

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fontastic.s3.amazonaws.com/sEsaN6ZPMiVLUYDwwr6us4/icons.css' rel='stylesheet' type='text/css'>


-var sites = [
-  'facebook',
-  'twitter',
-  'google',
-  'steam',
-  'icon-origin'
-]

.social-btns
  each site in sites
    a(href='#', class='btn ' + site)
      i(class='fa fa-' + site)

style.stylus

// reset
//@import '//codepen.io/chrisdothtml/pen/ojLzJK.css'

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  box-sizing: inherit;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
*:focus {
  outline: none;
}

html,
body {
  height: 100%;
}

html {
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
  min-width: 300px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

h1, h2, h3, h4, h5 {
  display: block;
  font-weight: 400;
}

li, span, p, a, h1, h2, h3, h4, h5 {
  line-height: 1;
}

p {
  display: block;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}




btn-size = 90px
sites = {
  'facebook': #3B5998
  'twitter': #3CF
  'google': #DC4A38
  'steam': #F26798
  'icon-origin': #fff
}

$animate {
  transition: all .35s
  transition-timing-function: cubic-bezier(
    0.310,
    -0.105,
    0.430,
    1.590
  )
}

$btn__inactive {
  
  &:before {
    top: 90%
    left: -110%
  }
  
  .fa {
    transform: scale(.8)
  }
  
  // variants
  for name, color in sites {
    
    &.{name} {
      
      &:before {
        background-color: color
      }
      
      .fa {
        color: color
      }
    }
  }
}

$btn__active {

  &:before {
    top: -10%
    left: -10%
  }

  .fa {
    color: #fff
    transform: scale(1)
  }
}

.social-btns {
  height: btn-size
  margin: auto
  font-size: 0
  text-align: center
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0

  .btn {
    @extends $btn__inactive
    @extends $animate
    display: inline-block
    background-color: #fff
    width: btn-size
    height: btn-size
    line-height: btn-size
    margin: 0 10px
    text-align: center
    position: relative
    overflow: hidden
    border-radius: 28%
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1)
    //overflow bug fix
    opacity: .99

    &:before {
      @extends $animate
      content: ''
      width: 120%
      height: 120%
      position: absolute
      transform: rotate(45deg)
    }

    .fa {
      @extends $animate
      font-size: 38px
      vertical-align: middle
    }

    &:focus,
    &:hover {
      @extends $btn__active
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

stylish-social-buttons.markdown

Stylish Social Buttons

A few cool social buttons with smooth animations. Inspired by https://dribbble.com/shots/1674790-Infinity-Icon-iOS-7

A Pen by Andre Saddler on CodePen.

License.