<h1>
  Elastic hover effect
</h1>

<p>(CSS only)</p>

<button class="Elastic">
  <div class="Elastic-content">
    Green
  </div>
</button>

<button class="Elastic Elastic--blue">
  <div class="Elastic-content">
    Blue
  </div>
</button>

<button class="Elastic Elastic--yellow">
  <div class="Elastic-content">
    Yellow
  </div>
</button>

<button class="Elastic Elastic--red">
  <div class="Elastic-content">
    Red
  </div>
</button>

<button class="Elastic Elastic--purple">
  <div class="Elastic-content">
    Purple
  </div>
</button>

<div>
  <p>Hover to see how it works:</p>

  <button class="Elastic Elastic--how">
    <div class="Elastic-content">
      Wireframe
    </div>
  </button>
</div>
// -- Variables

$size: 10px;
$offset: -4px;

$green: #5ac7ae;
$blue: #409ad7;
$yellow: #efc241;
$purple: #8c4ba9;
$red: #e34e47;

// -- Global

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  padding: 50px;
  text-align: center;
  font-size: 16px;
}

h1 {
  color: #333;
  font-size: 20px;
  font-weight: bold;
}

p {
  margin: 10px 0;
}

// -- Elastic button

.Elastic {
  background: $green;
  border: 0;
  color: #fff;
  font-size: 20px;
  margin: 10px;
  outline: none;
  padding: 20px 40px;
  position: relative;
  transition: transform 250ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
  transform: translateZ(0);
  overflow: visible; // For IE
}

// Elastic edges

.Elastic::before,
.Elastic::after,
.Elastic-content::before,
.Elastic-content::after {
  background: $green;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  transition: transform 250ms cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

// Horizontal edges

.Elastic::before,
.Elastic::after {
  height: $size;
  left: 0;
  transform: scaleY(0);
  width: 100%;
}

.Elastic::before {
  top: $offset;
}

.Elastic::after {
  bottom: $offset;
}

// Vertical edges

.Elastic-content::before,
.Elastic-content::after {
  width: $size;
  height: 100%;
  top: 0;
  transform: scaleX(0);
}

.Elastic-content::before {
  left: $offset;
}

.Elastic-content::after {
  right: $offset;
}

// Hover effect

.Elastic:hover,
.Elastic:focus {
  transform: scale(1.1);
  
  &::before,
  &::after,
  .Elastic-content::before,
  .Elastic-content::after {
    transform: none;
  }
}

// -- Color variations

.Elastic--red,
.Elastic--red::before,
.Elastic--red::after,
.Elastic--red .Elastic-content::before,
.Elastic--red .Elastic-content::after {
  background: $red;
}

.Elastic--blue,
.Elastic--blue::before,
.Elastic--blue::after,
.Elastic--blue .Elastic-content::before,
.Elastic--blue .Elastic-content::after {
  background: $blue;
}

.Elastic--purple,
.Elastic--purple::before,
.Elastic--purple::after,
.Elastic--purple .Elastic-content::before,
.Elastic--purple .Elastic-content::after {
  background: $purple;
}

.Elastic--yellow,
.Elastic--yellow::before,
.Elastic--yellow::after,
.Elastic--yellow .Elastic-content::before,
.Elastic--yellow .Elastic-content::after {
  background: $yellow;
}

// -- Shows how it works

.Elastic--how,
.Elastic--how::before,
.Elastic--how::after,
.Elastic--how .Elastic-content::before,
.Elastic--how .Elastic-content::after {
  background: transparent;
  border: 1px solid #aaa;
  color: #aaa;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.