CSS 3D Flip Button Effect

Hello coders,

In this article, you will learn to create a 3D Flip button using HTML CSS. Hover effect on button is applied and to flip the button transform(rotate, translate) property is used.

Follow these simple steps to make a beautiful Flip button:

1) Open any code editor like Visual Studio.
2) Create HTML, CSS files and put them in your project folder which you create.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste it into the HTML which you create.

See also  Animated Text Glitch Effect In Pure CSS

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Button</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <span><a href="#"></a></span>
    <span><a href="#"></a></span>
</body>
</html>

CSS Code:

body{
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(150deg, white 0%, pink 50%);
}
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: 4px solid #a1c7f8;
  box-sizing: border-box;
}
span:nth-child(1) a:before{
  color: #fff;
  background: #a1c7f8;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:after{
  color: white;
  transform: rotateX(90deg) translateZ(25px);
}
span:nth-child(2) a:before{
  color: #fff;
  background: #a1c7f8;
  transform: rotateX(-90deg) translateZ(25px);
}
span:nth-child(2) a:after{
  color: white;
  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);
}

OUTPUT

See also  Pure CSS Image Slider With Thumbnail Navigation

More Examples:

Social Media Icons using HTML and CSS

Image 3D Sliders using HTML AND CSS

Responsive Price Table using HTML and CSS

Leave a Reply

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