Creating a 3D Flip button using HTML and CSS
Creating 3D effects is one of the most demanding needs in web designing. In this article, we will learn to implement 3D Flip button animation effect using simple HTML and CSS. In this effect, whenever the user hovers over a button, it will show an animation of a flip with a 3D look.
HTML Code: In this section, we will use the anchor tag, and use CSS to design the button.
HTML
<!DOCTYPE html> <html> <body> <a href="#"> <span>GeeksForGeeks</span> </a> </body> </html> |
CSS Section: In this section, we will use some CSS properties to create the 3D effect.
The transform-style property is used to define that the effect should preserve the 3D positioning so that the effect looks correct. The :hover selector can be used to select the hyperlink and use the transform property. The rotateX() value is used to rotate the button whenever the button is being hovered over.
CSS Code:
CSS
<style> body { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: white; } a { position: relative; padding: 20px 40px; background: black; color: white; text-decoration: none; transform-style: preserve-3d; transition: ease-in-out 3s; } a:hover { transform: rotateX(360deg); } a span { display: block; font-weight: bold; transform-style: preserve-3d; } </style> |
Complete Code: In this section, we will combine the above two sections to create a complete effect.
HTML
<!DOCTYPE html> <html> <head> <style> body { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: white; } a { position: relative; padding: 20px 40px; background: black; color: white; text-decoration: none; transform-style: preserve-3d; transition: ease-in-out 3s; } a:hover { transform: rotateX(360deg); } a span { display: block; font-weight: bold; transform-style: preserve-3d; } </style> </head> <body> <a href="#"> <span>GeeksForGeeks</span> </a> </body> </html> |
Output:
Please Login to comment...