Sat Aug 27 2022

3D Button with Hover

CSS3094 views


3D Button with Hover

File Name: 3d-button.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">
    <title>3D Button with Hover Effect</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@500&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Mukta', sans-serif;
        }

        body {
            background-color: #292929;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            position: relative;
            width: 150px;
            font-size: 18px;
            font-weight: 500;
            text-align: center;
            color: #fff;
            text-decoration: none;
            perspective: 600px;
        } 
        
        .btn::before {
            position: absolute;
            content: attr(data-front);
            left: 0;
            right: 0;
            top: 0;
            padding: 8px 0;
            background-color: #e94b35;
            transition: 0.5s all ease;
            opacity: 1;
            transform: translateY(0) rotateX(0);
        }

        .btn::after {
            position: absolute;
            content: attr(data-back);
            left: 0;
            right: 0;
            top: 0;
            padding: 8px 0;
            background-color: #00bd9c;
            transition: 0.5s all ease;
            opacity: 0;
            transform: translateY(-50%) rotateX(90deg);
        }

        .btn:hover::before {
            opacity: 0;
            transform: translateY(50%) rotateX(-90deg);
        }

        .btn:hover::after {
            opacity: 1;
            transform: translateY(0) rotateX(0);
        }
    </style>
</head>
<body>
    <section>
        <a href="" class="btn" data-front="Send" data-back="Sent!"></a>
    </section>
</body>
</html>

Result Screenshot(s)

3D Button with HoverWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.