#vcent
button#rgb RGB
button#hsl HSL
View Compiled
html, body, #vcent
  height: 100%

body
  text-align: center
  background: #333
  
#vcent, button
  display: inline-block
  vertical-align: middle

button
  margin: 0 42px
  height: 60px
  width: 120px
  border: 0
  font: bold 24px/#{60px} sans-serif
  text-transform: uppercase
  color: white
  cursor: pointer
  transition: background 3s

#rgb
  background: #ff0000
  &:hover
    background: #00ff00
    
#hsl
  background: hsl(0, 100%, 50%)
  &:hover
    background: hsl(120, 100%, 50%)
      
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js