← All elements
<div class="if"><div><span class="a">♡</span><span class="b">♥</span></div></div>About this button
A square button that rotates in 3D to swap one CSS-drawn icon for another on hover.
How it works
A wrapper with perspective holds an inner element that rotates 180 degrees on the Y axis on hover. Two faces are stacked with backface-visibility hidden, and the back face is pre-rotated 180 degrees, so one icon is replaced by another.
Ways to customise it
- Replace the hearts with any characters.
- Use a different cubic-bezier for a flatter flip.
- Rotate on the X axis for a vertical flip.
Good to know
Make sure the meaning of both faces is clear for people who cannot hover. For a real like button use a checkbox so the state is kept.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.