Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create Directionally Lit 3D Buttons using CSS ?

  • Last Updated : 26 Sep, 2021

The directionally Lit 3D Button is an effect in which the button appears as a 3D figure. These buttons are created using HTML and CSS.

Approach: The best way to animate the HTML objects is by using CSS transforms and by setting the transforms at different stages.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • Create an HTML file.
  • Link the CSS file in HTML that provides all the animation’s effects to our HTML.
  • Add three anchor <a> tag for creating buttons and assign particular classes to them.

HTML Code:

HTML






<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content
        ="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
        href="buttons.css" type="text/css">
    <link rel="stylesheet" href=
</head>
  
<body>
    <div>
        <ul>
            <li id="like">
                <a href="#">
                    <i class="fa fa-thumbs-up"></i>
                    Like
                </a>
            </li>
            <li id="comment">
                <a href="#">
                    <i class="fa fa-comment"></i>
                    Comment
                </a>
            </li>
            <li id="share">
                <a href="#">
                    <i class="fa fa-share"></i>
                    Share
                </a>
            </li>
        </ul>
    </div>
</body>
  
</html>

CSS code: The following is the content for the “buttons.css” file used in the above HTML code. CSS is used to give different types of animations, transforms, and effects to our HTML page so that it looks interactive to all users. Restore all the browser effects. Use classes and id’s to give effects to buttons. Use transforms for giving directionally Lit 3D Buttons.

buttons.css




*{
    margin: 0;
    padding: 0;
}
  
div{
    background: lightgreen;
    width: 100vw;
    height: 100vh;
    font-family: 'Segoe UI', Tahoma, 
        Geneva, Verdana, sans-serif;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
ul{
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
}
  
a{
    text-decoration: none;
    color: rgba(0,0,0,0.7);
}
  
i{
    padding: 10px;
}
  
ul li{
    list-style: none;
    margin: 10px;
    display: block;
}
  
ul li a{
    width: 200px;
    height: 50px;
    background: orangered;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg) skewX(25deg);
    box-shadow: -20px 20px 8px;
    rgba(0,0,0,0.5);
}
  
ul li a:before{
    content:'';
    position:absolute;
    top:10px;
    left:-20px;
    background:orangered;
    height:100%;
    width:20px;
    transform:rotate(0deg) skewY(-45deg);
}
  
ul li a:after{
    content:'';
    position:absolute;
    bottom:-20px;
    left:-10px;
    background:orangered;
    height:20px;
    width:100%;
    transform:rotate(0deg) skewX(-45deg);
}
  
li a:hover{
    transform:rotate(-30deg) skew(25deg) translate(20px,-15px);
}

Output:

3D lit buttons




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!