<div class="wrap">

  <span>Inspired by the buttons on <a href="https://quickdraw.withgoogle.com/" target="_blank">Google quickdraw</a></span>
  <button class="qd-btn" onClick="yeah()">NEVER</button>
  <button class="qd-btn blue" onClick="yeah()">GONNA</button>
  <button class="qd-btn pink" onClick="yeah()">GIVE</button>
  <button class="qd-btn yellow" onClick="yeah()">YOU</button>
  <button class="qd-btn green" onClick="yeah()">UP</button>
  <button class="qd-btn red" onClick="yeah()">NEVER</button>
  <button class="qd-btn light-blue" onClick="yeah()">GONNA</button>
  <button class="qd-btn black" onClick="yeah()">LET?</button>
  
</div>
$size: 10
$shadowSize: 10
$animationTime: .1s

// active, smaller button calculation
$divider: 2
$smallDivider: 2
$bigDivider: 1

.qd-btn 
  outline: none
  border: none
  cursor: pointer
  background: #d3ccbd
  padding: 10px 9px
  display: block
  position: relative
  margin: #{$size*2}px 0 #{$size*4}px #{$size*2}px
  box-shadow: #{$shadowSize}px #{$shadowSize}px 2px 0px rgba(0,0,0,.3)
  color: white
  font-weight: 800
  width: 100%
  transition: all $animationTime
  top: 0
  left: 0
  &::after
    content: ""
    display: inline-block
    width: 100%
    height: #{$size*2}px
    background: #b8b09c
    position: absolute
    top: 100%
    right: #{$size}px
    transform: skewX(-45deg)
    box-shadow: #{$shadowSize*2}px #{$shadowSize*1}px 3px 0px rgba(0,0,0,.3)
    transition: all $animationTime
  &::before 
    content: ""
    display: inline-block
    height: 100%
    width: #{$size*2}px
    background: #e0dbcf
    position: absolute
    top: #{$size}px
    left: -#{$size*2}px
    transform: skewY(-45deg)
    transition: all $animationTime

  &:active
    top: #{$size}px
    left: -#{$size}px
    &::after
      height: #{$size*($smallDivider/$divider)}px
      right: #{$size*($bigDivider/$divider)}px
    &::before
      width: #{$size*($smallDivider/$divider)}px
      left: -#{$size*($smallDivider/$divider)}px
      top: #{$size*($bigDivider/$divider)}px
    
  &.pink 
    background: #ee7aaa
    &::before
      background: #f3a0c5
    &::after
      background: #db5b90
  
  &.yellow 
    background: #ffd139
    &::before
      background: #f9dd8f
    &::after
      background: #e2b537

  &.green 
    background: #2eaa50
    &::before
      background: #72b64b
    &::after
      background: #237636

  &.red 
    background: #de4937
    &::before
      background: #e26359
    &::after
      background: #c84433

  &.blue 
    background: #3665a6
    &::before
      background: #397ec1
    &::after
      background: #264973

  &.light-blue 
    background: #5ca8dd
    &::before
      background: #a6d7f5
    &::after
      background: #397ea9

  &.black 
    background: #000
    &::before
      background: #222
    &::after
      background: #111
  
// non button stuff 
html,body 
  margin: 10px
  padding: 0

.wrap
  width: 400px
  position: relative
  margin: 0 auto
  text-align: center
  font-family: verdana
  
View Compiled
var sounds = [
  'http://soundboard.panictank.net/2SAD4ME.mp3',
  'http://soundboard.panictank.net/AIRHORN.mp3',
  'http://soundboard.panictank.net/Darude - Dankstorm.mp3',
  'http://soundboard.panictank.net/HITMARKER.mp3',
  'http://soundboard.panictank.net/MOM GET THE CAMERA.mp3',
  'http://soundboard.panictank.net/Oh Baby A Triple.mp3',
  'http://soundboard.panictank.net/OMG TRICKSHOT CHILD.mp3',
  'http://soundboard.panictank.net/OOOOOOOOHMYGOOOOD.mp3',
  'http://soundboard.panictank.net/SANIC.mp3',
  'http://soundboard.panictank.net/SKRILLEX Scary.mp3',
  'http://soundboard.panictank.net/SMOKE WEEK EVERYDAY.mp3',
  'http://soundboard.panictank.net/WOMBO COMBO.mp3',
  'http://soundboard.panictank.net/DAMN SON WHERED YOU FIND THIS.mp3',
  'http://soundboard.panictank.net/Whatcha Say.mp3',
  'http://soundboard.panictank.net/2SED4AIRHORN.mp3',
  'http://soundboard.panictank.net/tactical nuke.mp3',
  'http://soundboard.panictank.net/intervention 420.mp3',
  'http://soundboard.panictank.net/AIRPORN.mp3',
  'http://soundboard.panictank.net/DEDOTADED WAM.mp3',
  'http://soundboard.panictank.net/DAMN SON WOW.mp3',
  'http://soundboard.panictank.net/GET NOSCOPED.mp3',
  'http://soundboard.panictank.net/AIRHORN SONATA.mp3',
  'http://soundboard.panictank.net/wow ;).mp3',
  'http://soundboard.panictank.net/SHOTS FIRED.mp3',
  'http://soundboard.panictank.net/NEVER DONE THAT.mp3',
  'http://soundboard.panictank.net/SPOOKY.mp3'
]

function yeah() {
  var sound = sounds[Math.floor(Math.random()*sounds.length)];
  var audio = new Audio(sound);
  audio.play();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.