3D Buttons Hover Effects using CSS

Hey, developers welcome to Day 6 of our 90Days 90Projects challenge. And in Day 6 we are going to create 3D Buttons Hover Effects using CSS.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

pricing card ui, pricing card ui design, pricing card using html and css, pricing card codepen, pricing card bootstrap, pricing card design, pricing card html css

HTML Code

<!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">
    <title> 3d Button Design</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <ul>
        <li class="like"><a href="#">
                <i class="fa-solid fa-thumbs-up"></i>
                <span>Like</span>
            </a></li>
        <li class="comments"><a href="#">
                <i class="fa-solid fa-comment"></i>
                <span>Comments</span>
            </a></li>
        <li class="share"><a href="#">
                <i class="fa-solid fa-share"></i>
                <span>Share</span>
            </a></li>
        <li class="subscribe"><a href="#">
                <i class="fa-solid fa-heart"></i>
                <span>Subscribe</span>
            </a></li>
    </ul>
    <!-- 3D Buttons Effects using CSS by raju_webdev -->
</body>
</html>


CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #e91e63;
    font-family: 'Poppins', sans-serif;
}

ul {
    display: flex;
    flex-wrap: wrap;
}

ul li {
    list-style: none;
    margin: 0 1.4rem;
}

ul li a i {
    font-size: 35px;
    color: #333;
    transition: 0.5s;
    padding-right: 1rem;
}

ul li a span {
    color: #333;
    letter-spacing: 2px;
    transition: 0.5s;
}

ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 13rem;
    height: 5rem;
    background: #fff;
    padding-left: 1.25rem;
    position: relative;
    transition: 0.5s;
}

ul li a::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    height: 100%;
    width: 1.25rem;
    background: #cecece;
    transition: 0.5s;
    transform: skewY(-45deg);
}

ul li a::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10px;
    height: 1.25rem;
    width: 100%;
    background: #cecece;
    transition: 0.5s;
    transform: skewX(-45deg);
}

ul li:hover i {
    color: #fff;
}

ul li:hover span {
    color: #fff;
}

ul li:hover a {
    background: #dd4b39;
    transform: translate(15px, -15px);
    box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}

ul li:hover a::before {
    background: #b33a2b;
}

ul li:hover a::after {
    background: #b33a2b;
}

.like:hover a,
.like:hover a::after,
.like:hover a::before {
    background: #598af2;
}

.subscribe:hover a,
.subscribe:hover a::after,
.subscribe:hover a::before {
    background: #f20000;
}

.share:hover a,
.share:hover a::after,
.share:hover a::before {
    background: #7809f7;
}

@media screen and (max-width: 1040px) {
    ul {
        flex-direction: column;
    }
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad