Creating a 3D Flip button using HTML and CSS Last Updated : 23 Dec, 2020 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article Create a 3D Text Effect using HTML and CSS R ritikumariupadhyay24 Follow Improve Article Tags : Technical Scripter Web Technologies Web Templates Technical Scripter 2020 Similar Reads Create a Button Group using HTML and CSS This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .butto 2 min read How to create a shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read Create a 3D Text Effect using HTML and CSS The 3D text effect is one of the most used text effects in the web design world. As a designer or front-end developer, one should know how to create a 3D text effect. Today we will be looking at one of the simplest and easiest methods to create text in a 3D look with HTML and CSS. ApproachCreate an 2 min read How to create a 3D Flip Box with CSS ? A 3D Flip Box is a visual effect where a container flips along the X or Y-axis to reveal another side, often used for interactive elements like cards. You can create it using CSS by applying transform, perspective, and transition properties for smooth flipping animations. ApproachCreate an HTML docu 3 min read Create a Coin Flip using HTML, CSS & JavaScript We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used 4 min read How to create fading buttons using CSS ? This article will explore how to create fading buttons using CSS. We can create two types of fading effects in buttons including fadeIn and FadeOut. The CSS property opacity is used to give a fading effect on hovering the button. Fading buttons offer an effective way to provide a pleasing visual eff 3 min read Like