3D Flip Buttons using HTML & CSS

Hello readers, Today in this blog you'll learn how to create Animated Buttons with 3D Hover Effect in HTML & CSS. Earlier I have shared a Glowing Hover Effects on CSS Buttons using HTML & CSS. Now it's time to create 3D Hover Effect or Animation on Buttons using only HTML & CSS.

A button is a fundamental UI element that will heavily affect your interaction design of the webpage. Buttons have the power to force users to convert, to act. Buttons are a middleman between the users and the products.

Today in this blog, I'll share with you this Animated 3D Flip Button. At first, these buttons are in the initial stage where there are no 3D effects or animations. But when you hover on the specific button, that button rotates vertically with 3D visualization.

Download code here

CSS Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
body{
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background:white;
}
span{
  position: relative;
  display: inline-flex;
  width: 180px;
  height: 55px;
  margin: 0 15px;
  perspective: 1000px;
}
span a{
  font-size: 19px;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transform: translateZ(-25px);
  transition: transform .25s;
  font-family: 'Montserrat', sans-serif;
}
span a:before,
span a:after{
  position: absolute;
  content: "BUTTON";
  height: 55px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid black;
  box-sizing: border-box;
}
span:nth-child(1) a:before{
  color: #fff;
  background: #000;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:after{
  color: #000;
  transform: rotateX(90deg) translateZ(25px);
}
span:nth-child(2) a:before{
  color: #fff;
  background: black;
  transform: rotateX(-90deg) translateZ(25px);
}
span:nth-child(2) a:after{
  color: #000;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:hover{
  transform: translateZ(-25px) rotateX(-90deg);
}
span:nth-child(2) a:hover{
  transform: translateZ(-25px) rotateX(90deg);
}

HTMl Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 <!DOCTYPE html>
<!-- Created By Mirulcoding - https://mirulcoding.blogspot.com/ -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
 <title>3D Flip Buttons | mirulcoding</title>
  </head>
  <body>
    <span><a href="#"></a></span>
    <span><a href="#"></a></span>

  </body>
</html>

3D Flip Buttons using HTML & CSS

Post a Comment

Post a Comment

Contact Form