CSS3 Button

css3-button.markdown

CSS3 Button

A Pen by Guillermo Soler on CodePen.

License.

index.pug

.button
   p.showed Hover me!
   p.hidded Push me!
   p.pushed :-)

style.sass

body
  text-align: center
  background-color: #D6EFFF

.button
  position: relative
  display: inline-block
  width: 150px
  height: 60px
  top: 75px
  background-color: #FF7D6B
  color: #FFDDD8
  text-transform: uppercase
  border-radius: 4px
  overflow: hidden
  cursor: pointer
  transition: all ease-in-out 0.25s
  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, .75), inset 0 1.5px 0 rgba(255,255,255, .2)
    
  p.showed
    display: block
    postion: absloute
    width: 100%
    height: 100%
    line-height: 30px
    opacity: 1
    top: 0
    transition: all 0.25s

  p.hidded
    display: block
    postion: absloute
    width: 100%
    height: 100%
    line-height: 30px
    opacity: 0
    top: 100%
    transition: all 0.25s
  
  p.pushed
    display: block
    postion: absloute
    width: 100%
    height: 100%
    line-height: 30px
    opacity: 0
    top: 100%
    transition: all 0.25s
  
  &:hover
    box-shadow: 0 27px 20px -20px rgba(0, 0, 0, 0.55), inset 0 1.5px 0 rgba(255,255,255, .2)
    transform: translate(0, -17px) scale(1.1) rotateZ(-3deg)
    
    :after
      animation: sheen 1s forwards
 
    p.showed
      /*top: -100%
      transform: translateY(-125%)
    p.hidded
      /*top: 0
      opacity: 1
      transform: translateY(-127%)
    p.pushed
      opacity: 0
      transform: translateY(-278%) translateX(-12.5%) scale(0.7) rotateZ(90deg)
      
  
  &:active
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.55), inset 0 1.5px 0 rgba(255,255,255, .2)
    transform: scale(0.98) rotateZ(0deg)
    p.hidded
      transform: translateY(-125%) scale(0.75)
      line-height: 35px
      opacity: 0
    p.pushed
      transform: translateY(-278%)translateX(-11.5%) scale(1.3)rotateZ(90deg)
      font-weight: bold
      opacity: 1