CodePen Embed - animation button#3-hover effect

body
  .btn-bg.Pokemon
    .btn-info Pokémon
    .btn-mention
      span get Up, get Out, and Explore!
    .btn-group
      .btn.ball
        button
          .pokemon-ball
          a Pokémon   
            span(data-letters="Go!")
            span(data-letters="Go!")
  .btn-bg.Ocean
    .btn-info Ocean
    .btn-mention
      | too much 
      span Debris
      |, too few 
      span Coral
    .btn-group
      .btn.Debris
        button(href="#")
          | debris
          span.one
      .btn.Coral
        button(href="#")
          | coral
          span.Coralwave1
          span.Coralwave2
          span.Coralwave3
  .btn-bg.Minecraft
    .btn-info Minecraft
    .btn-mention
      span Boom 
      span Boom 
      span Boom 
    .btn-group
      .btn.character
        button(href="#") i am creeper
          .creeper
            .eye
            .mouth
              .center
  .btn-bg.Pixar
    .btn-info Pixar
    .btn-mention
      span Emotions 
      | never 
      span Lie 
      | to you
    .btn-group
      .btn.Inside
        button(href="#")
          .box1
          .box2
          | inside
      .btn.Out
        button(href="#")
          .box1
          .box2
          | out
  .btn-bg.link
    .btn-info click!
    .btn-mention
      span more about me!
    .btn-group
      .btn.blog
        a(href="https://lichin.me/css/2016/07/28/hover-button-animation3" target="_blank")
          button visit blog!
            .like
              .hand
              .Finger
      .btn.codepen
        a(href="https://codepen.io/lichin-lin/" target="_blank")
          button my codepen
            .skeleton
              .face
              .eye
              .mouth

View Compiled

@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);

red = #E8574F
black = #50514F

water-bg = #239ED3
sand-bg = #FFD740
rose-bg = #F75674
grass-bg = #795548
orange-bg = #F99734

pokemon = #EF594F
pokemon-bg = #C1DAFF
pokemon-border = #3463AF

Hgreen = lighten(#1F8407,10%)
Mgreen = lighten(#1FA600,10%)
Rgreen = lighten(#2DBE0D,10%)
Lgreen = lighten(#83F568,10%)
  
Hwhite = #DCDDE5
Mwhite = #C9CACC
Rwhite = #EEEEFF
Lwhite = #FFFFFF

Hblack = #121212
Mblack = #343434
Rblack = #565656
Lblack = #787878

flex-style(way, just, align)
  display flex
  flex-direction way
  justify-content just
  align-items align
  
body
  padding 0
  margin 0
  .btn-bg
    width 100%
    height 100vh
    min-height 300px
    flex-style(column, center, center)
    
    &.Pixar
      background rose-bg
      
      .btn-info
        color black
      .btn-mention
        color black
        span
          color black
      .btn-group
        .Inside
          button
            color black
            border none
            overflow visible
            background transparent
            .box1,
            .box2
              position absolute
              content ''
              top 0
              left 0
              opacity 0
              transform-origin 50% 50%
              transition all 0.25s ease
            .box1
              width 100%
              height 50%
              top calc(50% - 25% )
              border-top 4px solid black
              border-bottom 4px solid black
            .box2
              width 50%
              height 100%
              left calc(50% - 25% )
              border-left 4px solid black
              border-right 4px solid black
            &:hover
              .box1
                top 0
                opacity 1
                height calc(100% - 8px)
                transition all 0.25s ease
              .box2
                left 0
                opacity 1
                width calc(100% - 8px)
                transition all 0.25s ease
        .Out
          button
            color black
            border none
            overflow visible
            background transparent
            .box1,
            .box2
              position absolute
              content ''
              top 0
              left 0
              opacity 0
              transform-origin 50% 50%
              transition all 0.25s ease
            .box1
              width 200%
              height 150%
              left calc(-50%)
              top calc(-50% + 25%)
              border-top 4px solid black
              border-bottom 4px solid black
            .box2
              width 150%
              height 200%
              top calc(-50%)
              left calc(-50% + 25%)
              border-left 4px solid black
              border-right 4px solid black
            &:hover
              .box1
                top 0
                left 0
                opacity 1
                width 100%
                height calc(100% - 8px)
                transition all 0.25s ease
              .box2
                top 0
                left 0
                opacity 1
                height 100%
                width calc(100% - 8px)
                transition all 0.25s ease

    &.Ocean
      background water-bg
      
      .btn-group
        .Debris
          button
            color white
            overflow hidden
            position relative
            border-radius 5px
            border 5px solid white
            background transparent
            transition all 2s ease
            span
              position absolute
              content ''
              top (2em - 0.5px)
              left (50%)
              width 20em
              height 20em
              opacity 0.5
              background white
              margin-left -10em
              border-radius 42.5%
              transform-origin 50% 50%
              animation wave 5s infinite linear
              transition all 2s ease, top 1.5s ease
            &:hover
              color black
              border-color black
              transition all 2s ease
              span
                opacity 1
                top (0.5em)
                background-color black
                transition all 2s ease, top 1.5s ease
        .Coral
          button
            color white
            overflow hidden
            position relative
            border-radius 5px
            border 5px solid white
            background transparent
            transition all 1s ease
            span
              position absolute
              content ''
              top (2em - 0.25px)
              left (50%)
              width 20em
              height 20em
              margin-left -10em
              border-radius 42.5%
              transform-origin 50% 50%
              transition all 1s ease, top 1.5s ease
            .Coralwave1
              background lighten(orange,20%)
              animation smallwave 3s infinite linear
            .Coralwave2
              background lighten(rose-bg,20%)
              animation smallwave 4s infinite linear
            .Coralwave3
              background lighten(water-bg, 20%)
              animation smallwave 5s infinite linear
            &:hover
              transition all 1s ease
              span
                top (0.5em)
                transition all 1s ease, top 1.5s ease
    &.Minecraft
      background grass-bg
      
      .btn-info
        color lighten(Lgreen,15%)
      .btn-mention
        span
          color lighten(Lgreen,15%)
      .btn-group
        .character
          button
            overflow hidden
            position relative
            color lighten(Lgreen,15%)
            border-radius 5px
            border 5px solid lighten(Lgreen,15%)
            padding calc(1rem + 5px) calc(3rem + 2.5px)
            background:
            linear-gradient(45deg, Lgreen 7.5px, transparent 5px) 0px 10px,
            linear-gradient(225deg, Lgreen 7.5px, transparent 5px) 10px 0px,
            linear-gradient(45deg, Rgreen 7.5px, transparent 5px) 0px 20px,
            linear-gradient(225deg, Rgreen 7.5px, transparent 5px) 10px 10px,
            linear-gradient(45deg, Hgreen 7.5px, transparent 5px) 0px 30px,
            linear-gradient(225deg, Hgreen 7.5px, transparent 5px) 10px 20px,
            linear-gradient(90deg, Mgreen 10px, transparent 10px),
            linear-gradient(Hgreen 25%, Mgreen 25%, Mgreen 50%, transparent 50%, transparent 75%, Rgreen 75%, Rgreen)
            background-color transparent
            background-size 0px 0px
            transition all 0.35s ease
            .creeper
              position absolute
              content ''
              top calc(50% - 30.5px)
              left calc(50% - 29px)
              width 60px
              height 60px
              opacity 0
              display flex
              flex-direction column
              transform scale(0.1)
              transition all 0.25s ease
              .eye
                height 20px
                position relative
                &:before, &:after
                  width 20px
                  height 20px
                  background black
                  position absolute
                  content ''
                  top 0
                  left 0
                &:after
                  left inherit
                  right 0
              .mouth
                height 40px
                position relative
                flex-style(row,center,flex-start)
                .center
                  background black
                  width 20px
                  height 30px
                &:before, &:after
                  width 10px
                  height 30px
                  background black
                  position absolute
                  content ''
                  top 10px
                  left 10px
                &:after
                  left inherit
                  right 10px
            &:hover
              color transparent
              border-color transparent
              background-color Lgreen
              background-size 20px 40px
              transition all 0.35s ease
              .creeper
                opacity 1
                transform scale(0.5)
                transition all 0.25s ease
    &.link
      background orange-bg
      .btn-group
        .blog
          button
            color white
            overflow hidden
            position relative
            border-radius 5px
            border 5px solid white
            padding calc(1rem + 10px) calc(3rem + 6.5px)
            background:
            linear-gradient(45deg, Lwhite 7.5px, transparent 5px) 0px 10px,
            linear-gradient(225deg, Lwhite 7.5px, transparent 5px) 10px 0px,
            linear-gradient(45deg, Rwhite 7.5px, transparent 5px) 0px 20px,
            linear-gradient(225deg, Rwhite 7.5px, transparent 5px) 10px 10px,
            linear-gradient(45deg, Hwhite 7.5px, transparent 5px) 0px 30px,
            linear-gradient(225deg, Hwhite 7.5px, transparent 5px) 10px 20px,
            linear-gradient(90deg, Mwhite 10px, transparent 10px),
            linear-gradient(Hwhite 25%, Mwhite 25%, Mwhite 50%, transparent 50%, transparent 75%, Rwhite 75%, Rwhite)
            background-color transparent
            background-size 0px 0px
            transition all 0.35s ease
            .like
              position absolute
              content ''
              top calc(50% - 35px)
              left calc(50% - 29.5px)
              width 60px
              height 80px
              opacity 0
              display flex
              flex-direction column
              transform scale(0.1)
              transition all 0.25s ease
              .hand
                height 30px
                position relative
                &:before, &:after
                  width 20px
                  height 30px
                  background black
                  position absolute
                  content ''
                  top 0
                  left 0
                &:after
                  left inherit
                  right 0
              .Finger
                height 40px
                position relative
                &:before
                  width 60px
                  height 20px
                  background black
                  position absolute
                  content ''
                  bottom 0
                  right 0
            &:hover
              color transparent
              border-color transparent
              background-color white
              background-size 20px 40px
              transition all 0.35s ease
              .like
                transform scale(0.5)
                opacity 1
                transition all 0.25s ease
        .codepen
          button
            color black
            border-radius 5px
            border 5px solid black
            overflow hidden
            position relative
            padding calc(1rem + 10px) calc(3rem + 6.5px)
            background:
            linear-gradient(45deg, Lblack 7.5px, transparent 5px) 0px 10px,
            linear-gradient(225deg, Lblack 7.5px, transparent 5px) 10px 0px,
            linear-gradient(45deg, Rblack 7.5px, transparent 5px) 0px 20px,
            linear-gradient(225deg, Rblack 7.5px, transparent 5px) 10px 10px,
            linear-gradient(45deg, Hblack 7.5px, transparent 5px) 0px 30px,
            linear-gradient(225deg, Hblack 7.5px, transparent 5px) 10px 20px,
            linear-gradient(90deg, Mblack 10px, transparent 10px),
            linear-gradient(Hblack 25%, Mblack 25%, Mblack 50%, transparent 50%, transparent 75%, Rblack 75%, Rblack)
            background-color transparent
            background-size 0px 0px
            transition all 0.35s ease
            .skeleton
              position absolute
              content ''
              top calc(50% - 30px)
              left calc(50% - 34px)
              width 60px
              height 60px
              display flex
              flex-direction column
              transform scale(0.1)
              opacity 0
              transition all 0.25s ease
              .face
                height 20px
                width 70px
                position relative
                z-index 1
                &:before, &:after
                  width 50px
                  height 60px
                  position absolute
                  content ''
                  background white
                  top 0px
                  left 10px
                  z-index 1
                &:after
                  width 70px
                  height 30px
                  top 10px
                  left 0
                  right 0
              .eye
                height 20px
                width 70px
                position relative
                &:before, &:after
                  width 20px
                  height 10px
                  position absolute
                  content ''
                  background black
                  left 10px
                  z-index 999
                &:after
                  left inherit
                  right 10px
              .mouth
                width 70px
                height 20px
                position relative
                &:before, &:after
                  position absolute
                  content ''
                  background black
                  width 10px
                  height 10px
                  bottom 0
                  left 20px
                  z-index 999
                &:after
                  left inherit
                  right 20px
            &:hover
              color transparent
              border-color transparent
              background-color black
              background-size 20px 40px
              transition all 0.35s ease
              .skeleton
                transform scale(1)
                opacity 1
                transition all 0.25s ease
    &.Pokemon
      background sand-bg
      .btn-group
        .ball
          button
            border 5px solid black
            border-radius 5px
            background transparent
            overflow hidden
            position relative
            &:hover
              border-color sand-bg
              .pokemon-ball
                &::before
                  transform translate3d(0,-100%,0)
                  transition transform 0.25s
                  transition-timing-function cubic-bezier(0.2,1,0.3,1)
                &::after
                  transform translate3d(0,100%,0)
                  transition transform 0.25s
                  transition-timing-function cubic-bezier(0.2,1,0.3,1)
              a
                transition none
                color transparent
                z-index 999
                &::before
                  transform translate3d(100%,0,0)
                span
                  &:first-child, &:nth-child(2)
                    &::before
                      transition-delay 0.3s
                      transform translate3d(0,0,0)
                      transition-timing-function cubic-bezier(0.2,1,0.3,1)
            .pokemon-ball
              position absolute
              content 'Go!'
              top 0
              left 0
              width 100%
              height 100%
              z-index 9
              &::before, &::after
                position absolute
                content ''
                top 0
                left 0
                width 100%
                height 50%
                background pokemon
                transform translate3d(0,0,0)
                transition transform 0.25s
                transition-timing-function cubic-bezier(0.2,1,0.3,1)
              &::after
                top 50%
                background white
            a
              color black
              font-weight 600
              font-size 1.5em
              transition color 0.5s 0.25s
              overflow hidden
              display inline-block
              position relative
              z-index 999
              &::before
                position absolute
                content ''
                width 100%
                height 5px
                background black
                top calc(50% - 2.5px)
                transition transform 0.4s cubic-bezier(0.7,0,0.3,1)
                transform translate3d(-100%,0,0)
              span
                position absolute
                width 100%
                height 50%
                top 0
                left 0
                overflow hidden
                &::before
                  position absolute
                  content attr(data-letters)
                  left 0
                  width 100%
                  color white
                  transition transform 0.5s
                &:first-child
                  &::before
                    top 0
                    color pokemon
                    transform translate3d(0,100%,0)
                &:nth-child(2)
                  top 50%
                  &::before
                    bottom 0
                    transform translate3d(0,-100%,0)
            
@keyframes wave
  0%
    transform (rotate(0deg) scale(1))
  50%
    transform (rotate(180deg) scale(0.975))
  100%
    transform (rotate(360deg) scale(1))
@keyframes smallwave
  0%
    transform (rotate(0deg) scale(1))
    opacity 0.8
  50%
    transform (rotate(180deg) scale(0.95))
    opacity 0.25
  100%
    transform (rotate(360deg) scale(1))
    opacity 0.8

.btn-group
  flex-style(row, space-between, center)
  max-width 1200px
  @media screen and (max-width: 480px)
    flex-style(column, space-between, center)
.btn
  margin 0 30px 30px 30px
  display block
.btn-info
  margin-bottom 10px
  text-align center  
  font-family 'Lato'
  text-transform uppercase
  letter-spacing 0.1em 
  font-weight 600
  font-size 3.5em
  color white
.btn-mention
  margin-bottom 70px
  text-align center  
  font-family 'Lato'
  letter-spacing 0.1em 
  font-size 1.1em
  color white
  span
    // text-transform uppercase
    font-size 1.2em
    font-weight 600
button 
  cursor pointer
  overflow visible
  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

View Compiled

// Pokemon animation was inspire by Mary Lou`s post on cordop: https://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/

This Pen is owned by lichinlin on CodePen.

See more by @lichin-lin on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.