Skip to content

Instantly share code, notes, and snippets.

@paullacey78
Last active March 27, 2024 17:44
Show Gist options
  • Save paullacey78/83a014acb5ba69d8f4a3d6d289debc22 to your computer and use it in GitHub Desktop.
Save paullacey78/83a014acb5ba69d8f4a3d6d289debc22 to your computer and use it in GitHub Desktop.
.fl-builder-content .fill .fl-button-wrap a.fl-button,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button {
font-family: var(--buttonFontFamily,var(--fontFamily));
font-size: var(--buttonFontSize);
font-weight: var(--buttonFontWeight);
font-style: var(--buttonFontStyle);
letter-spacing: var(--buttonLetterSpacing);
text-transform: var(--buttonTextTransform);
-webkit-text-decoration: var(--buttonTextDecoration);
text-decoration: var(--buttonTextDecoration);
border: var(--button-border);
background-color: var(--buttonInitialColor);
display: var(--display, inline-flex);
min-height: var(--buttonMinHeight);
padding: var(--button-padding);
border-radius: var(--buttonBorderRadius);
--has-link-decoration: var(--false);
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2) !important;
align-items: center;
justify-content: center;
transition: 0.2s ease-in-out;
min-width: 180px;
position: relative;
z-index: 1;
}
.fl-builder-content .fill .fl-button-wrap a.fl-button *,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button *,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button * {
color: var(--buttonTextInitialColor);
}
.fl-builder-content .fill .fl-button-wrap a.fl-button:hover,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover {
border-color: var(--buttonHoverColor);
color: var(--buttonTextHoverColor);
background-color: var(--buttonHoverColor);
transform: var(--buttonTransform, translate3d(0, -3px, 0));
}
.fl-builder-content .dark.fill .fl-button-wrap a.fl-button,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button {
border: 1px solid #fff;
background-color: #fff;
}
.fl-builder-content .dark.fill .fl-button-wrap a.fl-button *,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button *,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button * {
color: var(--buttonInitialColor);
}
.fl-builder-content .dark.fill .fl-button-wrap a.fl-button:hover,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover {
border-color: var(--buttonHoverColor);
color: var(--buttonTextHoverColor);
background-color: var(--buttonHoverColor);
transform: var(--buttonTransform, translate3d(0, -3px, 0));
}
.fl-builder-content .dark.fill .fl-button-wrap a.fl-button:hover *,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover *,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover * {
color: var(--buttonTextInitialColor);
}
.fl-builder-content .outline .fl-button-wrap a.fl-button,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button {
font-family: var(--buttonFontFamily,var(--fontFamily));
font-size: var(--buttonFontSize);
font-weight: var(--buttonFontWeight);
font-style: var(--buttonFontStyle);
letter-spacing: var(--buttonLetterSpacing);
text-transform: var(--buttonTextTransform);
-webkit-text-decoration: var(--buttonTextDecoration);
text-decoration: var(--buttonTextDecoration);
border: var(--button-border);
background-color: transparent;
display: var(--display, inline-flex);
min-height: var(--buttonMinHeight);
padding: var(--button-padding);
border-radius: var(--buttonBorderRadius);
--has-link-decoration: var(--false);
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
min-width: 180px;
position: relative;
z-index: 1;
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2) !important;
}
.fl-builder-content .outline .fl-button-wrap a.fl-button *,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button *,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button * {
color: var(--buttonInitialColor);
}
.fl-builder-content .dark.outline .fl-button-wrap a.fl-button,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button {
border: 1px solid #fff;
}
.fl-builder-content .outline .fl-button-wrap a.fl-button:hover,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover {
border: 2px solid var(--buttonHoverColor);
background-color: var(--buttonHoverColor);
transform: var(--buttonTransform, translate3d(0, -3px, 0));
}
.fl-builder-content .outline .fl-button-wrap a.fl-button:hover *,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover *,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover * {
color: var(--buttonTextInitialColor);
}
.fl-builder-content .dark.outline .fl-button-wrap a.fl-button *,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button *,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button * {
color: #fff;
}
/* SPECIAL EFFECT */
.fl-builder-content .fill .fl-button-wrap a.fl-button::before,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button::before,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button::before,
.fl-builder-content .outline .fl-button-wrap a.fl-button::before,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button::before,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button::before {
transition: 0.3s ease-in-out;
position: absolute;
z-index: 0;
left: 0px;
top: 0;
content: '';
height: 100%;
width: 0;
background-color: var(--buttonInitialColor);
}
.fl-builder-content .dark.fill .fl-button-wrap a.fl-button::before,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button::before,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button::before,
.fl-builder-content .dark.outline .fl-button-wrap a.fl-button::before,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button::before,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button::before {
background-color: #fff;
}
.fl-builder-content .fill .fl-button-wrap a.fl-button span,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button span,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button span,
.fl-builder-content .dark.outline .fl-button-wrap a.fl-button span,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button span,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button span {
position: relative;
z-index: 1;
color: #fff !important;
}
.fl-builder-content .outline .fl-button-wrap a.fl-button span,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button span,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button span,
.fl-builder-content .dark.fill .fl-button-wrap a.fl-button span,
.fl-builder-content .dark.fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button span,
.fl-builder-content .dark.outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button span {
position: relative;
z-index: 1;
color: var(--buttonInitialColor) !important;
transition: 0.3s ease-in-out;
}
.fl-builder-content .fill .fl-button-wrap a.fl-button:hover::before,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover::before,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover::before,
.fl-builder-content .outline .fl-button-wrap a.fl-button:hover::before,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover::before,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover::before {
width: calc(100% + 1px);
border-radius: 0 4px 4px 0;
background-color: var(--buttonHoverColor);
}
.fl-builder-content .fill .fl-button-wrap a.fl-button:hover span,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover span,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover span,
.fl-builder-content .outline .fl-button-wrap a.fl-button:hover span,
.fl-builder-content .fill-outline .fl-button-group-button:nth-child(2) .fl-button-wrap a.fl-button:hover span,
.fl-builder-content .outline-fill .fl-button-group-button:nth-child(1) .fl-button-wrap a.fl-button:hover span {
color: #fff !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment