.container
  button You Should Click Me

.push-modal
  | I'm a modal card, isn't this cool?!

boxShadow(level)
  if (level == 1)
    box-shadow 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
  if (level == 2)
    box-shadow 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
  if (level == 3)
    box-shadow 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 5px rgba(0, 0, 0, 0.23)
  if (level == 4)
    box-shadow 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
  if (level ==5)
    box-shadow 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22)
  else
    return

html
body
  width 100%
  height 100%
  min-height 100%

  overflow hidden

body
  margin 0
  padding 0

  background lighten(blue, 40%)

.container
  width 100%
  height 100%

  margin 0 auto

  background white

  transition-property ALL
  transition-duration 750ms
  transition-timing-function cubic-bezier(.77,0,.11,.97)

.container-pushed
  width 90%
  height 80%
  
  margin 10px auto

  boxShadow(3)

.push-modal
  position absolute
  max-width 720px
  width 96%
  height 400px

  bottom -@height
  left 50%
  transform translateX(-50%)
    
  boxShadow(5)
    
  background white
    
  transition-delay 150ms
  transition-property bottom
  transition-duration 750ms
  transition-timing-function cubic-bezier(.77,0,.11,.97)

.push-modal-active
  bottom 10px
    
    
    
    
red = lighten(red, 45%)
    
button
  position absolute
    
  top 50%
  transform translateY(-50%)
  
  left 50%
  transform translateX(-50%)
  
  color red
  background-color white
  outline none
  border 4px solid red
  padding 15px
  padding-left 25px
  padding-right 25px
  border-radius 3px
    
  transition-property ALL, top
  transition-duration 125ms, 550ms
  transition-timing-function linear, cubic-bezier(.77,0,.11,.97)
    
  &:hover
    background red
    color white
    border-bottom-left-radius 0px
    border-bottom-right-radius 0px
    box-shadow 1px 4px 0 0 lighten(red, 25%), -1px 4px 0 0 lighten(red, 25%)
    
  &:active
    box-shadow none
    border-bottom-left-radius 0px
    border-bottom-right-radius 0px
    background red
    color white
    margin-top 4px
    
    
.container-pushed button
    top 40px
    
    &:active
      top 44px
    
.push-modal
  font-size 42px
  line-height 400px
  text-align center

$('button').on('click',function() {
  $('.container').toggleClass('container-pushed');
  $('.push-modal').toggleClass('push-modal-active');
});