index.html

<h1>Click Me</h1>

<div class="pen">
  <div id="point"></div>
  <div class="sheen"></div>
  <div id="clicker"></div>
  <div id="drop">
    <div class="center"></div>
  </div>
</div>

<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" />

script.js

$(document).ready(function() {
  
  var pen = $('.pen');
  var clicker = $('#clicker');
  var point = $('#point');
  var drop = $('#drop');
  var cover = $('#cover');
  
  pen.click(function() {
    if (pen.hasClass('active')) {
      clicker.animate({width: '10px'}, '100')
        .animate({width: '30px'}, '100');
    
      point.animate({width: '15px'}, '100')
        .animate({width: '0px'}, '100');
    
      $(this).removeClass('active');
    }
    else {
      clicker.animate({width: '10px'}, '100')
        .animate({width: '15px'}, '100');
    
      point.animate({width: '15px'}, '100')
        .animate({width: '10px'}, '100');
    
      $(this).addClass('active');
      
      setTimeout(function() {
        $('h1').fadeOut('slow');
        pen.addClass('move');
      }, 100);
      
      setTimeout(function() {         
        drop.show();
        
        drop.animate({
          width: '20px',
          height: '20px',
          top: '15px'
        }, 500);
      }, 4000);
      
      setTimeout(function() {         
        drop.animate({
          right: '600px',
          width: '200px',
          height: '200px',
          top: '-75px'
        }, 800);
      }, 5000);
      
      setTimeout(function() {         
        $('img').show();
        $('.center').fadeIn('slow');
      }, 6000);
    }
  });


});

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Roboto:300);

$silver: #808080;

body {
  font-family: 'Roboto';
  background: white;
  overflow: hidden;
}

img {
  z-index: 2;
  position: absolute;
  display: block;
  width: 200px;
  left: 375px;
  left: calc(50% - 100px);
  top: 225px;
  display: none;
}

h1 {
  font-weight: 300;
  text-align: center;  
}

.pen {
  cursor: pointer;
  width: 500px;
  height: 50px;
  background: #111;
  position: absolute; 
  top: 100px;
  left: 225px;
  left: calc(50% - 250px);
  border-radius: 40% 30% 30% 40%;
  z-index: 1;
  
  &::before {
    content: "";
    position: absolute;
    height: 48px;
    width: 5px;
    top: 1px;
    background: $silver;
    left: 100px;
    z-index: 5;
    border-radius: 100% 0 0 100%;
  }
  
  &::after {
    content: "";
    position: absolute;
    z-index: 2;
    height: 10px;
    width: 150px;
    background: $silver;
    right: 15px;
    top: 20px;
    border-radius: 20% 40% 40% 20%; 
  }
  
  .sheen {
    position: absolute;
    height: 3px;
    width: 350px;
    z-index: 4;
    background: white;
    top: 10px;
    left: 80px;
    border-radius: 90% 70% 70% 90%;
  }
  
  #clicker {
    position: absolute;
    height: 20px;
    width: 30px;
    background: $silver;
    top: 15px;
    left: 500px;
    border-radius: 0 20px 20px 0;
  }
  
  #point {
    position: absolute;
    z-index: 0;
    height: 10px;
    width: 0px;
    background: $silver;
    top: 20px;
    right: 500px;
    border-radius: 100px 0 0 100px;
  }
  
  &.move {
    animation: rotate 2s ease 1 normal 1s forwards;
  }
  
  #drop {
    position: absolute;
    width: 0px;
    height: 0px;
    background: black;
    border-radius: 50%;
    right: 508px;
    top: 25px;
    z-index: -1;
    
    .center {
      position: absolute;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      left: 15px;
      top: 15px;
      background: white;
      z-index: 0;
      display: none;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg); 
  }
  
  to {
    transform: rotate(270deg);
    top: -150px;
  }
}