Skip to content
Related Articles

Related Articles

How to create Animated Hovered 3-D Buttons Effect using CSS ?
  • Last Updated : 08 Feb, 2021

The hovered 3-D effect on a button is an effect in which the button appears to come towards 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.

HTML Code:

  • Create an HTML file (index.html).
  • Link the CSS file in HTML that provides all the animation’s effect to our HTML. This is also placed in between <head> tag
  • Add two anchor <a> tag for creating buttons and assign particular classes to them.
  • Again use two anchor <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.




/* 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 psuedo 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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :