DEV Community

Cover image for Awesome 3D Buttons using Pure HTML & CSS.
Technical Vandar
Technical Vandar

Posted on • Edited on

3 1

Awesome 3D Buttons using Pure HTML & CSS.

3D buttons using HTML & CSS.

Source Code:

HTML CODE:


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Buttons</title>
</head>
<body>
    <ul>
        <li>
            <span><i class="fa fa-thumbs-o-up"></i></span>
            <a href="#">Like</a>
        </li>
        <li>
            <span><i class="fa fa-share"></i></span>
            <a href="#">Share</a>
        </li>
        <li>
            <span><i class="fa fa-heart"></i></span>
            <a href="#">Subscribe</a>
        </li>
    </ul>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS CODE:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #ccc;

}
ul{
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
ul li{
    list-style: none;
    height: 65px;
    width: 235px;
    border: 1px solid black;
    margin: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 35px;
    transform: rotate(-30deg) skewX(25deg) translate(0, 0);
    transition: 1s;
    box-shadow: -30px 30px 60px rgb(0, 45, 0.5);
}

ul li::before{
    content: '';
    position: absolute;
    top: 10px;
    height: 100%;
    width: 20px;
    left: -20px;
    background: #ffffff;
    transform: rotate(0deg) skewY(-45deg);
    transition: 1s;
}

ul li::after{
    content: '';
    position: absolute;
    bottom: -20px;
    height: 20px;
    width: 100%;
    left: -10px;
    background: #ffffff;
    transform: rotate(0deg) skewX(-45deg);
    transition: 1s;
}
ul li a{
    margin: 15px;
    text-decoration: none;
    color: black;
}
ul li:hover{
    background-color: black;
    color: white;
    margin-top: -20px;
}

ul li a:hover{
    color: white;
}
ul li:hover::after{
    box-shadow: -10px 10px 10px rgb(65, 85, 15);
    background-color: aqua;
}
ul li:hover::before{
    box-shadow: -10px 10px 10px rgb(65, 85, 15);

    background-color: aqua;
}
Enter fullscreen mode Exit fullscreen mode

Find Me On:



Facebook
Youtube
Github

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
posandu profile image
Posandu

That's it ? Only code and no preview of something ?

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more