css share button

CSS3
voted: 1
vote
HTML

css social share buttons

@import compass
@import compass/reset
=anim($duration: 280ms)
  +transition(all $duration ease)
body
  background: #000
.sns_box
  position: absolute
  overflow: hidden
  top: 0
  bottom: 0
  left: 50%
  +translateX(-50%)
  margin: auto
  height: 44px
  min-width: 268px
.sns_button
  float: left
  box-shadow: inset 0 0 0 2px #fff
  border-radius: 100%
  +anim
  a
    display: table-cell
    width: 44px
    height: 44px
    color: #fff
    text-align: center
    vertical-align: middle
    +anim
  i
    font-size: 20px
    vertical-align: middle
  &:hover
    box-shadow: inset 0 0 0 22px #fff
.sns_button + .sns_button
  margin: 0 0 0 12px
.twitter
  &:hover
    a
      color: #1B95E0
.facebook
  &:hover
    a
      color: #3B5999
.google
  &:hover
    a
      color: #dd4b39
.instagram
  &:hover
    a
      color: #2b5c84
.pocket
  &:hover
    a
      color: #EE4056
working url: http://codepen.io/tomonori_tomitsuka/pen/obwLyB
version: not entered
Leave a Comment:
Characters left:
No comments yet.