Day 083 - Social Connect

Day 083 - Social Connect.markdown

Day 083 - Social Connect

A Pen by Andreas Storm on CodePen.

License.

index.html

.social
  a.fb.text-center.pull-left(href="https://www.facebook.com/dribbble")
    .front
      i.fa.fa-facebook
      span.count.facebook 27k
    .behind.text-right
      |LIKE US
  a.tw.text-center.pull-left(href="https://twitter.com/dribbble")
    .front
      i.fa.fa-twitter
      span.count.twitter 136k
    .behind
      |FOLLOW
  a.ig.text-center.pull-left(href="https://instagram.com/dribbble")
    .front
      i.fa.fa-instagram
      span.count.instagram 14.6k
    .behind.text-left
      |FOLLOW

script.js

# Day 083 - Social Connect
# by Paul Flavius Nechita
# http://www.100daysui.com/

style.css

fb = #3b5998
tw = #55acee
ig = #3f729b

body, html
  height 100%
  
*
  box-sizing border-box
  
body
  font-family 'Lato', sans-serif
  background linear-gradient(#F7F8FA,#E5EAEE)
  
.fa-facebook
  color fb
.fa-twitter
  color tw
.fa-instagram
  color ig
  
.social
  position absolute
  top 50%
  left 50%
  width 840px
  transform translate(-50%,-50%)
  > a
    position relative
    display inline-block
    margin 40px
    width 200px
    height 200px
    cursor pointer
    &:hover
      .front
        transform translateY(-45px)
    &.fb:hover .front
      transform translate(-45px,-45px)
    &.ig:hover .front
      transform translate(45px,-45px)
  
.front 
  position absolute
  z-index 10
  width 200px
  height 200px 
  border-radius 3px
  background white
  box-shadow 0px 40px 40px rgba(#000,.06)
  transition all .3s ease-out
  i.fa
    display block
    margin 80px 0 30px 0
    font-size 32px
  span
    color #ccc

.behind
  position absolute
  z-index -1
  top 5px
  left 5px
  width 190px
  height 190px
  padding-top 160px
  border-radius 3px
  color white
  box-shadow 0px 0px 40px #B6BEC7, 0px 0px 120px #B6BEC7
    
.fb
  .behind
    padding-right 40px
    background fb
.tw
  .behind
    background tw    
.ig
  .behind
    padding-left 40px
    background ig
  
  

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />