<button>
  <i class='fontawesome-heart'></i>
  <span>Add to faves</span>
</button>

@import "nib"

@import url('http://weloveiconfonts.com/api/?family=fontawesome')
  
/* fontawesome */
[class*="fontawesome-"]
  font-style: normal
  &:before
    font-family: 'FontAwesome', sans-serif

@keyframes shine
  100%
    left: 100%

*, *:before, *:after
  box-sizing: border-box

html, body
  height: 100%
  
html
  overflow-x: hidden
  overflow-y: scroll
  text-rendering: optimizeLegibility
  text-size-adjust: 100%

body
  width: 100%
  background: #232323 url('https://i.imgur.com/5HldDuP.png') center center no-repeat
  background-size: cover

absolute-center(w, h)
  display: block
  position: absolute
  top: 50%
  left: 50%
  margin-top: -(h / 2)
  margin-left: -(w / 2)

fancy-btn(
    backgroundColor = #232323,
    textColor = null,
    buttonWidth = 150px,
    buttonHeight = 60px,
    borderSize = 4px,
    innerSpacing = 1em 2em,
    gradient = 'LightSkyBlue, NavajoWhite, LightCoral, NavajoWhite, LightSkyBlue',
    outerBorder = null
  )
  outerBorderSize = outerBorder ? outerBorder[0] : null
  gradientWidth = outerBorderSize ? (buttonWidth - borderSize * 2) - outerBorderSize * 2 : buttonWidth - borderSize * 2
  gradientHeight = outerBorderSize ? (buttonHeight - borderSize * 2) - outerBorderSize * 2 : buttonHeight - borderSize * 2
  textColor = light(backgroundColor) ? #555 : #ccc unless textColor
  tap-highlight-color: blue
  backface-visibility: hidden
  transform: translateZ(0)
  border: outerBorder ? outerBorder : none
  line-height: 1.5
  font-size: 12px
  font-smoothing: subpixel-antialiased
  text-transform: uppercase
  font-weight: 700
  letter-spacing: 2px
  color: textColor
  padding: innerSpacing
  border-radius: borderSize
  display: inline-block
  position: relative
  overflow: hidden
  vertical-align: middle
  width: 100%
  max-width: buttonWidth
  height: buttonHeight
  background-color: backgroundColor
  background: linear-gradient(0deg, backgroundColor, backgroundColor) borderSize borderSize / gradientWidth gradientHeight no-repeat,
              linear-gradient(90deg, gradient) 0% 0% / 200% 100% no-repeat
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.3)
  transition: transform 75ms linear, background 250ms linear
  user-select: none
  .no-touch &:hover, &:active, &:focus
    color: light(textColor) ? lighten(textColor, 80%) : darken(textColor, 80%)
    background: linear-gradient(0deg, backgroundColor, backgroundColor) borderSize borderSize / gradientWidth gradientHeight no-repeat,
                linear-gradient(90deg, gradient) 100% 0% / 200% 100% no-repeat
  .no-touch &:active, .touch &.hover-effect:after
    transform: translateZ(0) translateY((buttonHeight / 10)) scale(0.95)
  .no-touch &:hover:after, .touch &.hover-effect:after
    content: ''
    position: absolute
    width: buttonWidth
    left: -(buttonWidth)
    top: 0
    transform: skewX(-20deg)
    background-image: linear-gradient(to right,transparent,rgba(white, .08),transparent)
    height: buttonHeight
    animation: shine .5s ease
  > *
    display: inline-block
    vertical-align: middle
  

button
  fancy-btn(
    outerBorder: 1px solid white,
    borderSize: 2px,
    buttonWidth: 200px
  )
  absolute-center: 200px, 60px
  .fontawesome-heart
    color: pink
    font-size: 16px

$(document).ready(function() {
    $('button').bind('touchstart touchend', function(e) {
        $(this).toggleClass('hover-effect');
    });
});