section.effect-1
  ul
    li.og-bg
      a(href="#")
        span(data-hover="Slide in Bot") Slide in Bot
    li.rv-bg
      a(href="#")
        span(data-hover="Slide in Bot") Slide in Bot
        
section.effect-2
  ul
    li.top-bot
      a(href="#") Border light
    li.left-right
      a(href="#") Border light
      
section.effect-3
  ul
    li.trans
      a(href="#" data-hover="Slide in Left")
        span Slide in Left
    li.bg
      a(href="#" data-hover="Slide in Left") Slide in Left
      
section.effect-4
  ul
    li.up-down
      a(href="#")
        span
          span.first-word(data-hover="Roll") Roll 
          span.last-word(data-hover="Snippet") Snippet
    li.left-right
      a(href="#")
        span
          span.first-word(data-hover="Two words") Two words 
          span.last-word(data-hover="Only") Only
          
section.effect-5
  ul
    li.lb-rt
      a(href="#") Border Corner
    li.lt-rb
      a(href="#") Border Corner
      
section.effect-6
  ul
    li.once
      a(href="#")
        span Pop up
    li.sep
      a(href="#")
        span P
        span o
        span p
        span u
        span p
        
section.effect-7
  ul
    li.first-letter
      a(href="#") 
        span.rolling(data-hover="R") R
        span.rest olling Head
    li.first-word
      a(href="#") 
        span.rolling(data-hover="Rolling") Rolling
        span.rest Head
        
section.effect-8
  ul
    li.counter-clock-wise
      a(href="#") Rotate box
    li.clock-wise
      a(href="#") Rotate box
      
section.effect-9
  ul
    li.width-height
      a(href="#") Seperate in-out
    li.center-border
      a(href="#") Seperate in-out

*
  // border: solid 1px
  box-sizing: border-box
  font-family: 'Pathway Gothic One', sans-serif
  font-size: 1.05em

html, body
  margin: 0
  padding: 0
  background-color: rgba(#333, .5)

section
  width: 100%
  padding: 20px 0

ul
  list-style-type: none
  display: flex
  justify-content: space-around
  width: 50%
  min-width: 500px
  padding: 0
  margin: 0 auto
  
a
  position: relative
  display: inline-block
  margin: 15px 25px
  outline: none
  color: #fff
  text-decoration: none
  text-transform: uppercase
  letter-spacing: 1px
  font-size: 1.35em
  height: 2em
  line-height: 2em

a:hover, a:focus
  outline: none

section.effect-1
  background-color: #CD4436
  li.og-bg
    a
      overflow: hidden
      span
        text-align: center
        position: relative
        display: inline-block
        transition: .3s
        padding: 0px 10px
        &:before
          position: absolute
          top: 100%
          content: attr(data-hover)
          font-weight: bold
      &:hover span, &:focus span
        transform: translateY(-100%)
        
  li.rv-bg
    a
      overflow: hidden
      span
        text-align: center
        position: relative
        display: inline-block
        transition: .3s
        padding: 0px 10px
        &:before
          position: absolute
          top: 100%
          width: 100%
          left: 0
          color: #CD4436
          background-color: #fff
          content: attr(data-hover)
          font-weight: bold
      &:hover span, &:focus span
        transform: translateY(-100%)
        
section.effect-2
  background-color: #435A6B
  a
    color: #6587A0
    transition: color .3s
  li.top-bot
    a
      &:before, &:after
        content: ""
        position: absolute
        left: 0
        width: 100%
        height: 2px
        background-color: #fff
        opacity: 0
        transition: opacity .3s, transform .3s
      &:before
        top: 0
        transform: translateY(-10px)
      &:after
        bottom: 0
        transform: translateY(10px)
      &:hover, &:focus
        color: #fff
        &:before, &:after
          opacity: 1
          transform: translateY(0px)
  li.left-right
    a
      &:before, &:after
        content: ""
        position: absolute
        width: 2px
        height: 100%
        background-color: #fff
        opacity: 0
        transition: opacity .3s, transform .3s
      &:before
        left: -8px
        transform: translateX(-15px)
      &:after
        right: -8px
        transform: translateX(15px)
      &:hover, &:focus
        color: #fff
        &:before, &:after
          opacity: 1
          transform: translateX(0px)

section.effect-3
  background-color: #F19F0F
  ul
    li.trans
      position: relative
      z-index: 1
      a
        overflow: hidden
        span
          display: block
          padding: 0 10px
          background-color: #AF730A
          transition: .3s
        &:before
          position: absolute
          content: attr(data-hover)
          width: 100%
          padding: 0 10px
          left: 0
          background-color: #fff
          color: #AF730A
          z-index: -1
          transition: .3s
          transform: translateX(-25%)
        &:hover, &:focus
          span
            transform: translateX(100%)
          &:before
            transform: translateX(0%)
    li.bg
      a
        padding: 0 10px
        border-left: 3px solid #AF730A
        color: #AF730A
        overflow: hidden
        transition: .3s
        &:before
          position: absolute
          content: attr(data-hover)
          overflow: hidden
          color: #fff
          top: 0
          max-width: 0
          transition: max-width .3s
        &:hover, &:focus
          border-left: 3px solid #fff
          &:before
            max-width: 100%

section.effect-4
  $color-first: #0c8040
  $color-last: #626262
  
  background-color: #fefefe

  ul
    li.up-down a
      overflow: hidden
      .first-word, .last-word
        display: inline-block
        position: relative
        transition: transform .3s
        &:before 
          position: absolute
          content: attr(data-hover)
      .first-word
        margin-right: 5px
        color: $color-first
        &:before
          top: 100%
          color: $color-last
      .last-word
        color: $color-last
        &:before
          bottom: 100%
          color: $color-first
      &:hover
        .first-word
          transform: translateY(-100%)
        .last-word
          transform: translateY(100%)
          
    li.left-right a
      overflow: hidden
      .first-word, .last-word
        display: inline-block
        position: relative
        transition: transform .5s, color .5s ease-in-out
        &:before 
          position: absolute
          content: attr(data-hover)
          transition: color .5s ease-in-out
      .first-word
        margin-right: 5px
        color: $color-first
        &:before
          left: -100%
          color: transparent
      .last-word
        color: $color-last
        &:before
          right: -100%
          color: transparent
      &:hover
        .first-word
          transform: translateX(100%)
          color: transparent
          &:before
            color: $color-last
        .last-word
          transform: translateX(-100%)
          color: transparent
          &:before
            color: $color-first
          
section.effect-5
  background-color: #499F68
  li.lb-rt
    a
      &:before
        left: -8px
        bottom: -8px
        border-left: dashed 3px #62D2A2
        border-bottom: dashed 3px #62D2A2
      &:after
        right: -8px
        top: -8px
        border-right: dashed 3px #62D2A2
        border-top: dashed 3px #62D2A2
  li.lt-rb
    a
      &:before
        left: -8px
        top: -8px
        border-left: dashed 3px #62D2A2
        border-top: dashed 3px #62D2A2
      &:after
        right: -8px
        bottom: -8px
        border-right: dashed 3px #62D2A2
        border-bottom: dashed 3px #62D2A2
  a
    padding: 0 10px
    position: relative
    transition: .2s
    &:before, &:after
      content: ""
      border: dashed 2px transparent
      position: absolute
      height: 20%
      width: 20%
      transition: .2s
    &:hover
      background-color: #62D2A2
      &:before, &:after
        width: 80%
        height: 80%
    
section.effect-6
  background-color: #6892D5
  li
    a
      position: relative
      &:before
        content: ""
        display: block
        position: absolute
        padding: 0 40px
        width: 100%
        height: 40%
        bottom: 0
        left: -18%
        box-sizing: border-box
        border: solid 3px
        border-top: none
    &.once
      span
        display: block
        transition: .3s
      &:hover
        span
          transform: translateY(-12px) scale(1.2)
          text-shadow: 1px 1px 10px rgba(0,0,0,.5)
    &.sep
      span
        display: inline-block
        transition: .3s
        &:nth-child(3)
          margin-right: 5px
      &:hover
        @for $i from 1 through 5
          span:nth-child(#{$i})
            transform: translateY(-12px) scale(1.2)
            text-shadow: 1px 1px 10px rgba(0,0,0,.5)
            transition-delay: $i * .05s

section.effect-7
  background-color: #FCC29A
  li.first-letter
    .rest
      letter-spacing: 2px
  li.first-word
    span
      letter-spacing: 2px
      margin-right: 5px
  
  a
    perspective: 990px
    .rolling
      position: relative
      display: inline-block
      transition: .3s
      transform: perserve-3d
      transform-origin: 0 50%
      transform-style: preserve-3d
      line-height: 35px
      text-align: center
      padding: 0 2px
      &:before
        content: attr(data-hover)
        position: absolute
        bottom: 100%
        left: 0
        width: 100%
        height: 100%
        background-color: #FCC29A
        color: #FCC29A
        transform: rotateX(90deg)
        transform-origin: 0 50%
        transition: .3s
    &:hover, &:focus
      .rolling
        transform: rotateX(-90deg) translateY(10px)
        &:before
          background-color: #FF847C
          color: white
      
section.effect-8
  background-color: #E9F6F5
  a
    color: #333
    box-sizing: border-box
    padding: 0 10px
    height: 1.5em
    line-height: 1.5em
    position: relative
    transition: .2s
    &:before
      content: ""
      position: absolute
      display: block
      background-color: #D3E0E2
      box-shadow: 2px 2px 2px rgba(0,0,0,.3)
      z-index: -1
      left: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: .2s
  li.counter-clock-wise a
    &:hover
      transform: rotate(-5deg) scale(1.15)
      text-shadow: 10px 10px 2px rgba(0,0,0,.1)
      &:before
        opacity: 1
        transform: rotate(15deg)
  li.clock-wise a
    &:hover
      transform: rotate(5deg) scale(1.15)
      text-shadow: -10px 10px 2px rgba(0,0,0,.1)
      &:before
        opacity: 1
        transform: rotate(-15deg)
    
section.effect-9
  li.width-height a:before
    top: 50%
    left: 0
    transform: translateY(-50%)
    transition: 0.15s width ease-out, 0.15s height ease-out 0.2s, 0.15s top ease-out 0.2s
  li.center-border a:before
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    transition: 0.15s width ease-out, 0.15s height ease-out 0.2s, 0.15s top ease-out 0.2s
    
  a
    position: relative
    padding: 0 10px
    z-index: 1
    &:before
      content: ""
      display: block
      position: absolute
      width: 0%
      height: 3px
      z-index: -1
      background-color: #F19F0F
    &:hover
      &:before
        width: calc(100%)
        height: calc(100%)