<div class="container">
  <h1 class="element--description">Hey look</h1>
  
  <a class="element--hover">
    Hover me
  </a>
</div>

<div class="info">
  <p>Inspired by the drop shadows on Abduzeedo.com</p>
  <p>Here's a <a href="http://abduzeedo.com/node/82912">demo</a> of how they built their hover effect </p>      
</div>
body {
  margin: 0; // Reset
}

.container {
  height: 98vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #377FBF;
  
  padding: 0;
  margin: 0;
}

.element--description,
.element--hover {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #fff;
  
  background-color: #377FBF;
  
  padding: 2rem 4rem;
  border-radius: 8rem; // Curved corners
}

.element--description {
  margin-right: 4rem;
  
  // Here's where the shadow 🎉 happens
  // Esentially this is built using a series of slightly
  // different shadows. You can change these around to move
  // the "lighting" on the page. As a rule of thumb, the furter
  // a shadow is from the object, the more blur it should have.
  box-shadow: 0 4px  4px  rgba(0, 0, 0, .1),
              0 1px  6px  rgba(0, 0, 0, .05),
              0 8px  8px  rgba(0, 0, 0, .1), 
              0 16px 16px rgba(0, 0, 0, .1), 
              8px 32px 32px rgba(0, 0, 0, .15), 
              8px 64px 64px rgba(0, 0, 0, .15);
}

.element--hover {
  cursor: pointer;
  
  transition: box-shadow 600ms cubic-bezier(.33,.11,.02,.99),
              transform  600ms cubic-bezier(.33,.11,.02,.99);
  
  // The dynamic hover effect
  &:hover {
   box-shadow: 0 4px  4px  rgba(0, 0, 0, .1),
               0 1px  6px  rgba(0, 0, 0, .05),
               0 8px  8px  rgba(0, 0, 0, .1), 
               0 16px 16px rgba(0, 0, 0, .1), 
               8px 32px 32px rgba(0, 0, 0, .15), 
               8px 64px 64px rgba(0, 0, 0, .15); 

    transform: scale(1.05)
               translateY(-0.5rem);
  }
  
  
  &:active {
   box-shadow: 0 4px  4px  rgba(0, 0, 0, .1),
               0 1px  6px  rgba(0, 0, 0, .05),
               0 8px  8px  rgba(0, 0, 0, .1), 
               0 16px 16px rgba(0, 0, 0, .1), 
               8px 16px 16px rgba(0, 0, 0, .15), 
               8px 32px 32px rgba(0, 0, 0, .15); 
  }
}

.info {
  min-height: 20vh;
  background-color: darken(#377FBF, 10%);
  
  font-family: 'Josefin Sans', sans-serif;
  color: #aaaaee;
  text-align: center;
  
  padding: 2rem;
  margin: 0;
  
  a {
    color: #ddd;
    text-decoration: none;
    border-bottom: solid #ddd 1px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.