CSS KP 04— components

Greem
Sep 22, 2024

--


/* ------------------- */
/* 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>

--

--

No responses yet