body
  div.btn-bg.bg-1
    .btn.btn-1
      h2 ocean
      button(href='#')
        | click on me!
  div.btn-bg.bg-2
    .btn.btn-2
      h2 leaf
      button(href='#')
        | It Growth
  div.btn-bg.bg-3
    .btn.btn-3
      h2 Sand
      button(href='#')
        | flow away
  div.btn-bg.bg-4
    .btn.btn-4
      h2 Fire
      button(href='#')
        | on the flame
  div.btn-bg.bg-5
    .btn.btn-5
      h2 Windy
      button(href='#')
        | raining drop
  div.btn-bg.bg-6
    .btn.btn-6
      h2 mamba
      button(href='#')
        a
          | long night
  div.btn-bg.bg-1
    .btn.btn-1
      h2 If you like it
      a(href='http://lichin.me')
        button
          | view my Blog!

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,100italic,300italic,400italic,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
aqur-color = #C7F8F9
aqur-bg = #6AB1C9
grass-color = #D0F9C7
grass-bg = #78C98D
sand-color = #F6F7C5
sand-bg = #E5D272
fire-color = #EDA39A
fire-bg = #ED6A5A
fire-active=#ED412A
cloud-color=#C4C0C0
cloud-bg = #ffffff
witch-color=#D3B7F7
witch-bg=#AC7EE5
witch-active=#8460AF
body
  padding 0
  margin 0
  .btn-bg
    width 100%
    height 50vh
    display flex
    flex-direction column
    align-items center
    justify-content center
    &.bg-1
      background aqur-bg
      .btn-1
        button
          color aqur-color
          background transparent
          border 3px solid aqur-color
          border-radius 5px
          -webkit-transition all .5s ease
          transition all .5s ease
          -webkit-transform translate(0, 0)
          transform translate(0, 0)
          a
            color aqur-color
          &:hover
            background aqur-color
            color aqur-bg
            border 3px solid aqur-bg
            -webkit-transition all .35s ease
            transition all .35s ease
            >a
              color aqur-bg
              -webkit-transition all .35s ease
              transition all .35s ease
          &:active
            -webkit-transform translate(5px, 5px)
            transform translate(5px, 5px)
            
            
    &.bg-2
      background grass-bg
      .btn-2
        button
          color grass-bg
          background grass-color 
          border none
          -webkit-transition all .7s ease
          transition all .7s ease
          &:hover
            background transparent
            color grass-color 
            &:before , &:after
              -webkit-transition all .7s ease
              transition all .7s ease
              width 100%
          &:before , &:after
            content ''
            position absolute
            top 0
            left 0px
            width 0px
            height 3px
            background grass-color 
            transition all .4s ease
          &:after
            top inherit
            left inherit
            bottom 0
            right 0
            
            
    &.bg-3
      background sand-bg
      .btn-3
        button
          color sand-bg
          background sand-color
          border none
          -webkit-transition all 1s ease
          transition all 1s ease
          &:hover
            -webkit-transition all .7s ease
            transition all .7s ease
            background transparent
            color sand-color
            &:after
              transition all .3s ease
              width 100% 
              left 0
          &:after
            position absolute
            transition all .3s ease
            content ''
            width 0
            bottom 0
            left inherit
            right 0
            height 3px
            background sand-color
    &.bg-4
      background fire-bg
      .btn-4
        button
          color fire-color
          border-radius 5px
          background radial-gradient(circle,fire-active 0.25em, transparent 0.25em) center/1.2em 1.2em
          border 3px solid fire-active
          -webkit-transition all .3s ease
          transition all .3s ease
          &:hover
            color white
            background radial-gradient(circle, fire-active 0.25em, transparent 0.25em) center/0.1em 0.1em
            -webkit-transition all .5s ease 
            transition all .5s ease 
    &.bg-5
      background cloud-bg
      .btn-5
        h2
          color cloud-color
        button
          color cloud-color
          background transparent
          border 3px solid cloud-color
          border-radius 5px
          -webkit-transition all .25s ease
          transition all .25s ease
          &:hover
            border-color #50514f
            color #50514f
            background-image repeating-linear-gradient(-25deg, cloud-color, cloud-color 3px, transparent 4px, transparent 7px)
            background-size 12px 16px
            -webkit-animation cloud-animation 1.25s infinite ease
            animation cloud-animation 1.25s infinite ease
            -webkit-animation-delay 0
            -webkit-transition all .25s ease
            transition all .25s ease
    &.bg-6
      background witch-bg
      .btn-6
        button
          width 11em
          height 3em
          color witch-color
          background transparent
          border 3px solid witch-color
          border-radius 5px
          -webkit-transition border 0.5s ease-out
          transition border 0.5s ease-out
          transition-delay .8s
          a
            position absolute
            z-index 2
            left 43px
            top 17px
          &::before,&::after
            position absolute
            top 0
            left 0
            right 0
            bottom 0
            margin auto
            content 'LONG NIGHT'
            border-radius 50%
            display block
            width 22em
            height 22em
            left -5.5em
            text-align center
            -webkit-transition box-shadow .5s ease-out
            transition box-shadow .5s ease-out
            transition-delay .75s
            -webkit-transition-delay .75s  
            z-index 1 
          &::after
            transition-delay .25s
            -webkit-transition-delay .25s
          &:hover
            color white
            border-color witch-active
            animation witch-word-color 1.5s ease
            -webkit-transition border .2s ease
            transition border .2s ease
            &::before
              box-shadow inset 0 0 0 11em #B657E5
              transition-delay .05s
            &::after
              box-shadow inset 0 0 0 11em witch-active
              transition-delay .5s
@keyframes cloud-animation
    100%
      background-position  0px 2em
@keyframes witch-word-color
    0%
      color witch-color
    50%
      color #50514f
    100%
      color white
.btn
  margin 0 auto 30px auto
  //overflow hidden
  display block
h2
  text-align center  
  font-family 'Raleway'
  font-weight 600
  color white
  //text-transform uppercase
button 
  cursor pointer
  overflow hidden
  outline none
  color #fff
  position relative
  letter-spacing 0.1em 
  font-weight 400
  padding 1rem 3rem 1rem 3rem
  text-transform uppercase
  font-family "Lato"
  font-size 1.5em
  a
    text-decoration none