.ckl-btn {
font-size: 1rem;
font-weight: 700;
font-family: var(--ckl-font-tag);
text-transform: uppercase;
text-decoration: none;
padding: 1.375rem 1.9375rem;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
height: 3.875rem;
border: 0;
cursor: pointer;
color: var(--sweep-label, var(--ckl-button-primary));
background-color: var(--sweep-from, var(--ckl-aqua-blue));
background-image: linear-gradient(var(--sweep-to, var(--ckl-blue)), var(--sweep-to, var(--ckl-blue)));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition:
color 0.2s ease-in-out,
transform 0.2s ease-in-out,
var(--ckl-sweep-transition);
}
.ckl-btn:hover,
.ckl-btn:focus-visible {
color: var(--sweep-label-hover, var(--ckl-white));
background-size: 100% 100%;
}
.ckl-btn:focus-visible {
outline: 0.125rem solid var(--ckl-blue);
outline-offset: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
.ckl-btn {
transition: color 0.2s ease-in-out;
}
}
@media (max-width: 1024px) {
.ckl-btn {
padding: 1rem 1.5rem;
font-size: 0.875rem;
}
} .ckl-btn--primary {
--sweep-from: var(--ckl-aqua-blue);
--sweep-to: var(--ckl-blue);
--sweep-label: var(--ckl-button-primary);
--sweep-label-hover: var(--ckl-white);
}
.ckl-btn--secondary {
--sweep-from: var(--ckl-blue);
--sweep-to: var(--ckl-white);
--sweep-label: var(--ckl-white);
--sweep-label-hover: var(--ckl-blue);
}
.ckl-btn--tertiary {
--sweep-from: var(--ckl-white);
--sweep-to: var(--ckl-aqua-blue);
--sweep-label: var(--ckl-blue);
--sweep-label-hover: var(--ckl-blue);
}
.ckl-btn--nonary {
--sweep-from: var(--ckl-light-gray);
--sweep-to: var(--ckl-blue);
--sweep-label: var(--ckl-button-primary);
--sweep-label-hover: var(--ckl-white);
} .ckl-btn--outline {
--sweep-from: transparent;
--sweep-to: var(--ckl-blue);
--sweep-label: var(--ckl-blue);
--sweep-label-hover: var(--ckl-white);
box-shadow: inset 0 0 0 0.125rem var(--ckl-blue);
} .ckl-btn--outline-current {
--sweep-from: transparent;
--sweep-to: var(--ckl-white);
--sweep-label: currentColor;
--sweep-label-hover: var(--ckl-blue);
box-shadow: inset 0 0 0 0.125rem currentColor;
} .ckl-see-more {
font-family: var(--ckl-font-tag);
font-weight: 700;
font-size: 0.7875rem; line-height: 1;
text-transform: uppercase;
color: var(--ckl-blue);
display: inline-flex;
align-items: center;
transition: color 0.2s ease-in-out;
}
.ckl-see-more::after {
content: ">";
margin-left: 0.5em;
transition: transform 0.35s var(--ckl-ease-entrance);
}
.ckl-see-more:hover,
.ckl-see-more:focus-visible {
color: var(--ckl-dark);
}
.ckl-see-more:hover::after {
transform: translateX(0.25rem);
}