Animated Button - Spinning Block

A button that behaves more like a flipping block - on hover it spins to reveal a new side. Each side can be customized independently with different text, colors, fonts, or styles.

The effect is achieved by placing the front and back faces in the ::before and ::after pseudo-elements. The main button div remains invisible; it provides structural support and ensures the element doesn't deform during the transition. On hover, each pseudo-element is rotated and shifted using transform, creating the illusion of one face sliding away as the other rotates into view. Once the animation completes, the inactive side is hidden with opacity: 0 to complete the illusion.

The animation itself is straightforward. No custom keyframes are needed - just a simple transition on transform and opacity for each side.

HTML:

Copy to clipboard

<a href='#'><div id='button-example-1729'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-1729 {
opacity: 1;
outline: 0;
color: #243120; 
background-color: #243120;
padding: 20px 40px;
width: 200px;
position: relative;
text-align: center;
display: block;
filter: drop-shadow(5px 5px 1px rgba(7.1, 9.8, 6.3, 0.6));

}
#button-example-1729:before {
top: 0;
left: 0;
opacity: 1;
color: #fffff7;
background-color: #243120;
display: block;
width: 200px;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
transition: 0.5s;
position: absolute;
content: "Click me!";
transform: translateY(0) rotateX(0);

}
#button-example-1729:hover:before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);

}
#button-example-1729:after {
top: 0;
left: 0;
opacity: 0;
width: 100%;
color: #fffff7;
display: block;
width: 200px;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
transition: 0.5s;
position: absolute;
background: #6A975E;
content: "Please click.";
transform: translateY(-50%) rotateX(90deg);

}
#button-example-1729:hover:after {
opacity: 1;
transform: translateY(0) rotateX(0);

}

Pumpkins n' Pies