How to create Animated Hovered 3-D Buttons Effect using CSS ?

Last Updated : 29 May, 2023

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> tag
Add 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);
    }
}