Buttons Overview
Default Button
/*---------------------------------------------------------------------------
03-03 Buttons (BSB)
---------------------------------------------------------------------------*/
/* Button General & Helpers FRAMEWORK 2024-05-05
-----------------------------------------------*/
/* Button Resets */
button { outline: none; }
.wp-block-buttons-is-layout-flex { display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-block-buttons > .wp-block-button a { display: inline-block; margin: 0 !important; }
/* Button Sizing */
.button.smallbtn, .wp-block-button.smallbtn .wp-block-button__link { font-size: 0.75rem; }
.button.largebtn, .wp-block-button.largebtn .wp-block-button__link { font-size: 2rem; }
.button.expanded, .wp-block-button.expanded, .wp-block-button.expanded .wp-block-button__link { display: block; width: 100%; margin-right: 0; margin-left: 0; }
/* Button Default FRAMEWORK 2024-05-05
-----------------------------------------------*/
:root { --button_brdr: 3px; }
@media screen and (max-width: 700px) {
:root { --button_brdr: 3px; }
}
.button.bkg-1, .wp-block-button__link.has-clr-1-background-color,
.button, .wp-block-file a.wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="submit" i],
/* VENDOR BUTTONS */
/* Woocommerce Base*/ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
/* Woocommerce Alt*/ .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
/* Woocommerce Barn 2 Table products */.wc-product-table-controls .wc-product-table-multi-form input[type=submit],
/* Gut */ a.wp-block-button__link,
/* Wpsl Search page */ #wpsl-search-btn,
/* Message Plugin */
.fep-button[type="submit"]
{
display: inline-block;
vertical-align: middle;
margin: 0 0 .7em 0;
padding: .7em 1.2em !important;
text-transform: uppercase !important;
font-family: var(--bodyfont) !important;
font-weight: 800 !important;
font-style: normal !important;
line-height: 1 !important;
font-size: 1rem !important;
text-align: center;
cursor: pointer;
background-color: var(--clr-1) !important;
background-image: linear-gradient( 90deg, var(--clr-1-light),var(--clr-1-dark) ) !important;
color: var(--clr-white) !important;
border: none !important;;
border-radius: 9999px !important;
transition: var(--transitions_slower);
text-shadow: var(--shadow-text);
}
.button:hover,.button:focus, .wp-block-file a.wp-block-file__button:hover,.wp-block-file a.wp-block-file__button:focus,
button:hover,button:active, button:focus,
input[type="button"]:hover,input[type="button"]:active, input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus,
input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus
input[type="submit" i]:hover , input[type="submit" i]:active , input[type="submit" i]:focus
/* VENDOR BUTTONS */
/* Woocommerce Base*/ .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
/* Woocommerce Alt*/ .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
/* Woocommerce Barn 2 Table products */ .wc-product-table-controls .wc-product-table-multi-form input[type=submit]:hover,
/* Gut */ a.wp-block-button__link:hover,
/* Message Plugin */
.fep-button[type="submit"]:hover
{
background-color: var(--clr-1);
background-image: linear-gradient( 90deg, var(--clr-1-light),var(--clr-1-dark) );
opacity: .6;
color: var(--clr-white); !important;
transition: var(--transitions_slower);
}
/* Button Disabled FRAMEWORK 2024-05-05
-----------------------------------------------*/
/* VENDOR BUTTONS */
/* Woocommerce */
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled, .woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled, .woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled]
{
color: inherit; cursor: not-allowed; opacity: .5; padding: .618em 1em; padding: .4rem 1.8rem; font-size: 1rem; color: #fff;
}Solid Buttons
/* Solid Buttons FRAMEWORK 2024-05-05
-----------------------------------------------*/
/* Color 2 Button */
.button.bkg-2,
.wp-block-button__link.has-clr-2-background-color {
color: var(--clr-white) !important;
background-image: linear-gradient( 90deg, var(--clr-2-light),var(--clr-2-dark) ) !important;
}
.button.bkg-2:hover,
.wp-block-button__link.has-clr-2-background-color:hover,
.button.bkg-2:focus,
.wp-block-button__link.has-clr-2-background-color:focus {
background-image: linear-gradient( 90deg, var(--clr-2-light),var(--clr-2-dark) );
}
/* Color White Button */
.button.bkg-white,
.wp-block-button__link.has-white-background-color,
#wpsl-search-btn,
.wpsl-search-widget input[type="submit" i] {
color: var(--clr-2) !important;
background-image: none !important;
background-color: var(--clr-white) !important;
text-shadow: none;
}
.button.bkg-white:hover,
.button.bkg-white:focus,
.wp-block-button__link.has-white-background-color:hover,
.wp-block-button__link.has-white-background-color:focus,
#wpsl-search-btn:hover, #wpsl-search-btn:focus,
.wpsl-search-widget input[type="submit" i]:hover,
.wpsl-search-widget input[type="submit" i]:focus {
color: var(--clr-2) !important;
background-image: none !important;
background-color: var(--clr-white) !important;
}
/* Color Black Button */
.button.bkg-black,
.wp-block-button__link.has-black-background-color {
color: var(--clr-white) !important;
background-image: none !important;
background-color: var(--clr-black) !important;
}
.button.bkg-black:hover,
.wp-block-button__link.has-black-background-color:hover,
.button.bkg-black:focus,
.wp-block-button__link.has-black-background-color:focus {
color: var(--clr-white) !important;
background-image: none !important;
background-color: var(--clr-black) !important;
}Hollow Buttons
/* Hollow Button FRAMEWORK 2024-05-05
-----------------------------------------------*/
/* Default Hollow Button */
.button.hollow,
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.button.bkg-1.hollow,
.is-style-outline > .wp-block-button__link.has-clr-1-color,
.wp-block-button__link.has-clr-1-color.is-style-outline
.is-style-outline > .wp-block-button__link:not(.has-background), .wp-block-button__link.is-style-outline:not(.has-background),
.is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) {
border: var(--button_brdr) solid !important;
background: transparent !important;
text-shadow: none;
color: var(--clr-1) !important;
border-color: var(--clr-1) !important;
background: transparent !important;
}
.button.bkg-1.hollow:hover,
.button.bkg-1.hollow:focus,
.is-style-outline > .wp-block-button__link.has-clr-1-color:hover,
.is-style-outline > .wp-block-button__link.has-clr-1-color:focus,
.wp-block-button__link.has-clr-1-color.is-style-outline:hover,
.wp-block-button__linkhas-clr-1-color.is-style-outline:focus {
opacity: .25 !important;
color: var(--clr-1-hover) !important;
border-color: var(--clr-1-hover) !important;
background: transparent !important; }
/* Color 2 Hollow Button */
.button.bkg-2.hollow,
.is-style-outline > .wp-block-button__link.has-clr-2-color,
.wp-block-button__link.has-clr-2-color.is-style-outline {
color: var(--clr-2) !important;
border-color: var(--clr-2) !important;
background: transparent !important;
}
.button.bkg-2.hollow:hover,
.button.bkg-2.hollow:focus,
.is-style-outline>.wp-block-button__link.has-clr-2-color:hover,
.is-style-outline>.wp-block-button__link.has-clr-2-color:focus,
.wp-block-button__link.has-clr-2-color.is-style-outline:hover,
.wp-block-button__linkhas-clr-2-color.is-style-outline:focus {
color: var(--clr-2-hover) !important;
border-color: var(--clr-2-hover) !important;
background: transparent !important;
}
/* Color White Hollow Button */
.button.bkg-white.hollow,
.is-style-outline > .wp-block-button__link.has-white-color,
.wp-block-button__link.has-white-color.is-style-outline {
color: var(--clr-white) !important;
border-color: var(--clr-white) !important;
background: transparent !important;
}
.button.bkg-white.hollow:hover,
.button.bkg-white.hollow:focus,
.is-style-outline > .wp-block-button__link.has-white-color:hover,
.is-style-outline > .wp-block-button__link.has-white-color:focus,
.wp-block-button__link.has-white-color.is-style-outline:hover,
.wp-block-button__linkhas-white-color.is-style-outline:focus {
color: var(--clr-white-hover) !important;
border-color: var(--clr-white-hover) !important;
background: transparent !important;
}
/* Color Black Hollow Button */
.button.bkg-black.hollow,
.is-style-outline>.wp-block-button__link.has-black-color,
.wp-block-button__link.has-black-color.is-style-outline {
color: var(--clr-black) !important;
border-color: var(--clr-black) !important;
background: transparent !important;
}
.button.bkg-black.hollow:hover,
.button.bkg-black.hollow:focus,
.is-style-outline>.wp-block-button__link.has-black-color:hover,
.is-style-outline>.wp-block-button__link.has-black-color:focus,
.wp-block-button__link.has-black-color.is-style-outline:hover,
.wp-block-button__linkhas-black-color.is-style-outline:focus {
color: var(--clr-black-hover) !important;
border-color: var(--clr-black-hover) !important;
background: transparent !important;
}
Minimal UI Button
/* Minimal UI Button 2024-05-05
-----------------------------------------------*/
/* Default Button UI Stuing */
.button_ui, .button_ui-child > a, .button_ui-child.is-style-outline > a.wp-block-button__link,
/* VENDOR BUTTONS */
/* Message Plugin */
#fep-menu .fep-button, .fep-button,
a.fep-button:visited, .fep-button-active,
/* Editor Buttons */
.ed_button.button.button-small
{
padding: .5em .7em !important;
text-transform: uppercase !important;
font-family: var(--bodyfont);
font-weight: 700;
font-style: normal;
line-height: 1;
font-size: 1rem !important;
text-align: center;
cursor: pointer;
border-radius: 1rem !important;
transition: var(--transitions);
border: var(--button_brdr) solid !important;
background: transparent !important;
text-shadow: none;
color: var(--clr-2) !important;
border-color: var(--clr-2) !important;
background: transparent !important;
}
.button_ui:hover, .button_ui:focus, .button_ui:active,
.button_ui-child > a:hover, .button_ui-child > a:focus, .button_ui-child > a:active,
.button_ui-child.is-style-outline > a.wp-block-button__link:hover, .button_ui-child.is-style-outline > a.wp-block-button__link:focus, .button_ui-child.is-style-outline > a.wp-block-button__link:active,
/* VENDOR BUTTONS */
/* Message Plugin */
#fep-menu .fep-button:hover, .fep-button-active, a.fep-button-active:visited,
/* Editor Buttons */
.ed_button.button.button-small:hover
{
opacity: 1 !important;
color: var(--clr-white) !important;
border-color: var(--clr-1) !important;
background: var(--clr-1) !important; }
}