The button is the most important element of the website. It is necessary that it should be attractive with colors, shapes, and animation. It should be created in such a way that users like to click it, and animation is one of the things that can attract the users to interact with the button. The button is a bridge between the user and the product or any other information page.
CSS3 and JavaScript give us the power of different types of animation to any element of the website.This helps us to make the website eye-catching and attractive with the help of color, gradients, shapes, and animations.
Today we are going to create 3D Button Fip Animation vertically on mouse hover with the help of CSS3 features. At first in its initial stage, there is no effect or animation on the button, when your mouse hovers over the button it flips vertically and shows you another side of the button When you leave the button it comes to its initial stage. If you are finding it difficult to understand, then you can watch my short video below on 3D Flip Animation and you can also find source code on the webpage.
After watching this video I hope you are able to understand that in this only HTML and CSS code is being used to create a Flip Animation effect.
If you are just a beginner-level programmer and have a basic understanding of HTML and CSS then you can easily understand this type of 3D Animation.
How to Create 3D Flip Animation Button Hover Effect using HTML and CSS
To create a 3d flip button. You need to create two files in a folder with the help of any HTML editor software or you can simply open Notepad and save it with index.html name and a second Notepad file save with style.css. Open both the files index.html and style.cssfiles in any HTML Editor software copy the following HTML code and paste it into your index.html file.
<!DOCTYPE html>
<html>
<head>
<title>
3D Flip Button using HTML & CSS | Technoambience
</title>
</head>
<body>
<span>
<a href="#"></a>
</span>
</body>
</html>
Now copy the CSS code and paste it into the style.css file
body{
margin: 0;
padding: 0;
display: flex;
height: 100vh;
align-items:center;
justify-content:center;
background:white;
}
span{
position:relative;
display:inline-flex;
width:200px;
height: 55px;
perspective:1000px;
}
span a{
font-size: 19px;
letter-spacing: 1px;
transform-style: preserve-3d;
transform:translateZ(-25px);
transition:transform .25s;
font-family: Arial, Helvetica, sans-serif;
}
span a:before,
span a:after{
position:absolute;
content:"FLIP BUTTON";
height:55px;
width: 200px;
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(1) a:hover{
transform:translateZ(-25px) rotateX(-90deg);
}
and save both files.
Now open your index.html file in the browser and you will see that the 3D Flip Animation button is successfully created
