CSS KP 04— components

/* ------------------- */
/* Compontents         */
/* ------------------- */

.large-button {
    position: relative;
    display: grid;
    z-index: 1;
    place-items: center;
    padding: 0 2em;
    border-radius: 50%;
    aspect-ratio: 1;
    text-decoration: none;
}

.large-button::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: hsl( var(--clr-white) / .15);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 500ms linear, transform 750ms ease-in-out;
}

.large-button:hover::after,
.large-button:focus::after {
    opacity: 1;
    transform: scale(1.5);
}

html

            
            <section class="flow" id="interactive-elements">
                <h2 class="numbered-title"><span>03</span> Interactive elements</h2>
                
                <!-- navigation -->
                <div></div>
                
                <div class="flex">
                    <div style="margin-top: 5rem">
                        <!-- explore button -->
                        <a href="#" class="large-button uppercase ff-serif fs-600 text-dark bg-white">Explore</a>
                    </div>
                    
                    <div style="margin-bottom: 50vh">
   
                    </div>
                </div>
                
            </section>