<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.