3D Button

We can use transform, rotateX and :hover to create a 3D rotating button effect.

Code snippets

<div class='button3d'>
  <a href='#' class='button'>Hover me</a>


a {
  text-decoration: none;
  color: #222;

.button3d {
  perspective: 600px;
  cursor: pointer;
  .button {
    display: block;
    padding: 1rem;
    background: GOLD; 
    text-align: center;
    transition: all 0.6s ease-out;
  &:hover .button {
    transform: rotateX(360deg);
    transition: all 0.3s ease-out;

Code example link:


How it works

The container is to prevent the transition stops and struggle when the element is between hover and non-hover state.


Usually we set the perspective value to be between 300px and 800px.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.