How to create Animated Hovered 3-D Buttons Effect using CSS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The hovered 3-D effect on a button is an effect in which the button appears to come toward the user on hovering. These buttons are created using HTML and CSS.Approach: The best way to animate the HTML objects is done by using CSS @keyframes and by setting the transitions at different stages.Example: In this example, we will create animated hovered 3-D buttons using the above approach. HTML Code:Create an HTML file (index.html).Link the CSS file in HTML that provides all the animation's effects to our HTML. This is also placed in between <head> tagAdd two anchor <a> tags for creating buttons and assign particular classes to them.Again use two anchors <a> tags for creating the buttons. We assign particular classes to them. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <h2>hovering buttons</h2> <a href="#" class='btn head_button'>hover here</a> <a href="#" class='btn head_button_2'>hover here</a> <br><br><br><br> <a href="#" class='btn head_button_3'>hover here</a> <a href="#" class='btn head_button_4'>hover here</a> </body> </html> CSS code: The following is the content for the 'style.css' file used in the above HTML code. CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users. Restore all the browser effects.Use classes and ids to give effects to HTML elements.Use @keyframes{} for giving the animation to HTML elements. CSS /* Restoring browser effects */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body content is same for all elements so we specify this in body section */ body { background-color: #000; text-align: center; padding: 20vh; } h2 { text-align: center; color: aquamarine; position: absolute; top: 10vh; left: 43vw; } /* CSS for visited state of the link */ .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; position: relative; transition: all .2s; margin: 5vh; } /* CSS for hover over the link */ .btn:hover { transform: translateY(-10px); box-shadow: 0 10px 100px; } .btn:active { transform: translateX(0); box-shadow: 0 20px 50px; } .head_button { background-color: #fff; padding: 10px 40px; border-radius: 70px; display: inline-block; animation-name: todown; animation-duration: 5s; } .head_button_2 { background-color: rgba(214, 200, 3, 0.705); padding: 10px 40px; border-radius: 70px; display: inline-block; animation-name: todown; animation-duration: 5s; color: rgba(13, 105, 13, 0.829); } .head_button_3 { background-color: rgba(172, 16, 16, 0.705); padding: 10px 40px; border-radius: 70px; display: inline-block; animation-name: todown; animation-duration: 5s; color: #000; } .head_button_4 { background-color: rgba(16, 172, 37, 0.705); padding: 10px 40px; border-radius: 70px; display: inline-block; animation-name: todown; animation-duration: 5s; color: aqua; } /* This pseudo class defines the after effects of the link */ .btn::after { content: ''; display: inline-block; height: 100%; width: 100%; border-radius: 100px; position: absolute; top: 0; left: 0; z-index: -1; transition: all .4s; } .head_button::after { background-color: #fff; } .head_button_2::after { background-color: rgba(131, 15, 15, 0.801); } .head_button_3::after { background-color: rgba(15, 131, 31, 0.801); } .head_button_4::after { background-color: rgba(131, 15, 116, 0.801); } .btn:hover::after { transform: scale(1.5); opacity: 0; } /* Animation that moves the button towards down when we reload our web page */ @keyframes todown { 0% { opacity: 0; transform: translateY(-150px); } 60% { opacity: 0.6; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } Output: Comment More infoAdvertise with us Next Article Create a Button Animation Effect using CSS R rahulmahajann Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2020 CSS-Questions +1 More Similar Reads How to create button hover animation effect using CSS ? Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::sel 3 min read Create a Button Animation Effect using CSS It is possible to apply various animation effects to any item using the CSS animation property. In order to get the hover effect, we will design a button and use the animation effect. When the user hovers over the button, the underlining for the text expands till it reaches the end. The hover animat 3 min read How to Create Animated Loading Button using CSS? An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation.Table of ContentUsing Font A 3 min read How to Create Text Reveal Effect for Buttons using HTML and CSS ? Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text-reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience. Approach: The approa 2 min read How to Create Directionally Lit 3D Buttons using CSS ? To create 3D buttons with directional lighting effects using CSS, we'll combine transformations, shadows, and pseudo-elements to simulate depth and light. These buttons will include Font Awesome icons and respond interactively to user actions. Here's how you can achieve this effect.Start with a basi 2 min read How to create icon hover effect using CSS ? To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can 2 min read Like