Skip to content

Instantly share code, notes, and snippets.

@duc-codehq
Created September 16, 2025 01:53
Show Gist options
  • Select an option

  • Save duc-codehq/9d01f2c03ba85c8c94dc593f6cc0bd7f to your computer and use it in GitHub Desktop.

Select an option

Save duc-codehq/9d01f2c03ba85c8c94dc593f6cc0bd7f to your computer and use it in GitHub Desktop.
.cta-container {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.cta-content {
display: flex;
flex-direction: column;
gap: 4px;
color: #151515;
}
.cta-title,
.cta-description {
margin: 0 !important;
line-height: 1.25 !important;
}
.cta-title {
font-size: 18px !important;
font-weight: 650 !important;
letter-spacing: -0.18px !important;
}
.cta-description {
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: -0.14px !important;
}
.cta-dark-button,
.cta-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 12px 16px;
border-radius: 24px;
font-size: 13px;
font-weight: 650;
line-height: 12px;
letter-spacing: -0.13px;
text-decoration: none;
outline: none;
}
.cta-dark-button::before,
.cta-button::before {
content: "";
position: absolute;
inset: 0;
z-index: 10;
border-radius: inherit;
}
.cta-dark-button:focus,
.cta-dark-button:focus-visible,
.cta-button:focus,
.cta-button:focus-visible {
outline: none;
}
.cta-dark-button:focus-visible,
.cta-button:focus-visible {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
}
@media (min-width: 640px) {
.cta-dark-button,
.cta-button {
width: fit-content;
}
}
.cta-dark-button {
background-color: #000;
color: #fff;
}
.cta-dark-button:hover::before,
.cta-dark-button:focus-visible::before {
background-color: rgba(255, 255, 255, 0.15);
}
.cta-dark-button:focus::before,
.cta-dark-button:active::before {
background-color: rgba(255, 255, 255, 0.2);
}
.cta-button {
background-color: #fff;
color: #151515;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.cta-button:hover::before,
.cta-button:focus-visible::before {
background-color: rgba(0, 0, 0, 0.05);
}
.cta-button:focus::before,
.cta-button:active::before {
background-color: rgba(0, 0, 0, 0.1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment