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>
</div>

CSS

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:

https://codepen.io/makzan/pen/Alytd

How it works

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

Perspective

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.