Aug 3, 2022

Custom Cart Button

CSS 304 views
<!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>Custom Cart Button</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #fbfbfb;
        }

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

        a {
            position: relative;
        }

        a::before {
            position: absolute;
            content: attr(data-item);
            width: 30px;
            height: 30px;
            background-color: #ff3300;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            border-radius: 100%;
            color: #fff;
            right: 22%;
            top: 4px;
            z-index: -1;
            transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        a:hover:before {
            transform: scale(1.2);
            top: -1px;
            z-index: 0;
        }

        a svg {
            width: 80px;
            height: 80px;
        }

        a svg path {
            fill: #292929;
        }
        
    </style>
</head>
<body>
    <section>
        <a href="" data-item="99">
            <svg viewBox="0 0 32 32" ><g data-name="Layer 2" id="Layer_2"><path d="M24.33,23H13.53a3,3,0,0,1-2.9-2.21L8,11.26a1,1,0,0,1,.17-.87A1,1,0,0,1,9,10H28a1,1,0,0,1,.77.36,1,1,0,0,1,.21.82l-1.7,9.36A3,3,0,0,1,24.33,23Zm-14-11,2.25,8.26a1,1,0,0,0,1,.74h10.8a1,1,0,0,0,1-.82L26.8,12Z"/><path d="M9,12a1,1,0,0,1-1-.73L6.45,5.73a1,1,0,0,0-1-.73H4A1,1,0,0,1,4,3H5.49A3,3,0,0,1,8.38,5.18L10,10.73A1,1,0,0,1,9.27,12,.84.84,0,0,1,9,12Z"/><path d="M16,29a2,2,0,1,1,2-2A2,2,0,0,1,16,29Zm0-2h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Zm0,0h0Z"/><path d="M22,29a2,2,0,1,1,2-2A2,2,0,0,1,22,29Zm0-2Z"/><path d="M22,17H16a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Z"/></g><g id="frame"><rect fill="none" height="32" width="32"/></g></svg>
        </a>
    </section>
</body>
</html>
Result Screenshot(s)

Author: Geekboots