/* =========================================================
BUTTON.CSS — Bricks Builder
---------------------------------------------------------
Bricks rendert de Button als één element (GEEN wrapper-div):
Tekst
Tekst
Grootte-classes (via Size-dropdown in builder):
.sm .md .lg .xl
Ingebouwde stijl-classes (via Style-dropdown in builder):
.bricks-background-primary .bricks-color-primary (+ outline)
.bricks-background-secondary .bricks-color-secondary
.bricks-background-light .bricks-background-dark etc.
Custom variant-classes (zelf toevoegen in builder):
Global Class toevoegen aan element → zit op hetzelfde element
Form submit-button (GEEN .brxe-button, wel .bricks-button):
Cascade: deze CSS staat buiten @layer bricks → wint automatisch.
Geen !important nodig behalve bij plugin-overschrijvingen.
========================================================= */
/* =========================================================
1. BASE
========================================================= */
/* ── Gedeelde look: button, nav-links, hamburger/close ── */
.bricks-button,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a,
.brxw-header-05__toggle,
.brx-offcanvas-inner .brxe-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(125deg, #ffea6e, #ffe234);
color: #3d2b00;
border: unset;
position: relative;
border-radius: 7px;
transform: translateY(+1.5px);
box-shadow:
rgb(255 210 50 / 24%) 0px -23px 25px 0px inset,
rgb(120 80 0 / 85%) 0px -36px 30px 0px inset,
rgb(200 160 0 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgb(0 0 0 / 25%) 1px 11px 17px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.05, 0.9, 0.1, 1);
cursor: pointer;
}
/* Button & nav-link: tekst-eigenschappen en padding */
.bricks-button,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a {
gap: 0.5em;
padding: 25px 56px;
text-shadow:
0 1px 2px rgba(255, 255, 255, 0.55),
0 -1px 1px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
/* Hamburger / offcanvas-close: vierkant, groen — valt meer op */
.brxw-header-05__toggle,
.brx-offcanvas-inner .brxe-toggle {
padding: 20px;
background: linear-gradient(125deg, #6fff6e, #ffe234);
box-shadow:
rgb(255 210 50 / 24%) 0px -23px 25px 0px inset,
rgb(32 123 56 / 85%) 0px -36px 30px 0px inset,
rgb(200 160 0 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgb(0 0 0 / 25%) 1px 11px 17px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.brxw-header-05__toggle:hover,
.brx-offcanvas-inner .brxe-toggle:hover {
background: linear-gradient(125deg, #7fff7e, #ffd800);
box-shadow:
rgb(100 200 80 / 19%) 0px -23px 25px 0px inset,
rgb(20 100 40 / 70%) 0px -36px 30px 0px inset,
rgb(100 200 80 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
/* ── ::before — reflectie-overlay, normale staat: uitpuilend ── */
.bricks-button::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a::before,
.brxw-header-05__toggle::before,
.brx-offcanvas-inner .brxe-toggle::before {
content: '';
position: absolute;
inset: 3% 1%;
border-radius: 7px;
pointer-events: none;
background: rgba(255, 245, 180, 0.185);
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.116),
0 2px 5px rgba(0, 0, 0, 0.219),
5px 0 9px rgba(0, 0, 0, 0.068),
-5px 0 9px rgba(0, 0, 0, 0.103),
0 -1px 4px rgba(0, 0, 0, 0.096),
0 1px 0 rgba(255, 255, 255, 0.164);
transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* Toggle is vierkant: geen zij-schaduwen in normale staat */
.brxw-header-05__toggle::before,
.brx-offcanvas-inner .brxe-toggle::before {
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.116),
0 2px 5px rgba(0, 0, 0, 0.219),
0 -1px 4px rgba(0, 0, 0, 0.096),
0 1px 0 rgba(255, 255, 255, 0.164);
}
/* ── Hover / ingedrukt: button, nav, open-submenu ── */
.bricks-button:hover,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a:hover,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li.open > a,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li:has(> .brx-submenu-toggle[aria-expanded="true"]) > a,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li:has(.sub-menu:hover) > a {
background: linear-gradient(125deg, #fff06e, #ffd800);
transform: translateY(0);
box-shadow:
rgb(160 100 0 / 19%) 0px -23px 25px 0px inset,
rgb(140 90 0 / 70%) 0px -36px 30px 0px inset,
rgb(220 180 0 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
/* ── Hover::before — ingedrukt-effect, identiek voor alle varianten ── */
.bricks-button:hover::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a:hover::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li.open > a::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li:has(> .brx-submenu-toggle[aria-expanded="true"]) > a::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li:has(.sub-menu:hover) > a::before,
.brxw-header-05__toggle:hover::before,
.brx-offcanvas-inner .brxe-toggle:hover::before {
background: rgba(45, 54, 50, 0.082);
box-shadow:
inset 0 7px 18px rgba(0, 0, 0, 0.096),
inset 0 3px 7px rgba(0, 0, 0, 0.247),
inset 6px 0 12px rgba(0, 0, 0, 0.055),
inset -6px 0 12px rgba(0, 0, 0, 0.16),
inset 0 -1px 5px rgba(0, 0, 0, 0.089),
0 1px 0 rgba(255, 255, 255, 0.10);
}
.bricks-button:focus-visible,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a:focus-visible {
box-shadow:
rgb(200 160 50 / 17%) 0px -23px 25px 0px inset,
rgb(130 90 0 / 70%) 0px -36px 30px 0px inset,
rgb(255 220 80 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgb(0 0 0 / 21%) 0px 16px 8px,
rgb(200 160 0 / 28%) 0px 15px 16px;
}
@media (max-width: 768px) {
.bricks-button {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.brxe-button {
max-width: 95vw;
}
}
/* =========================================================
2. VARIANTEN
---------------------------------------------------------
A) Ingebouwde Bricks stijl-classes (Style-dropdown builder)
Overschrijf hier de kleur van de base indien nodig.
B) Custom Global Classes (zelf toevoegen in builder)
Selector-patroon: .brxe-button.[variant] { }
========================================================= */
/* --- A) Ingebouwde stijlen ------------------------------ */
/* .bricks-button.bricks-background-primary { stap 2 } */
/* .bricks-button.bricks-background-secondary { stap 2 } */
/* .bricks-button.outline { stap 2 } */
/* .bricks-button.outline:hover { stap 2 } */
/* --- B) Custom Global Classes --------------------------- */
/* Ghost / tekst-only — Global Class: "btn-ghost" */
/* .bricks-button.btn-ghost { stap 2 } */
/* .bricks-button.btn-ghost:hover { stap 2 } */
.bricks-button.btn-green {
background: linear-gradient(125deg, #6fff6e, #ffe234);
box-shadow:
rgb(255 210 50 / 24%) 0px -23px 25px 0px inset,
rgb(32 123 56 / 85%) 0px -36px 30px 0px inset,
rgb(200 160 0 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgb(0 0 0 / 25%) 1px 11px 17px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.bricks-button.btn-green:hover {
background: linear-gradient(125deg, #7fff7e, #ffd800);
box-shadow:
rgb(100 200 80 / 19%) 0px -23px 25px 0px inset,
rgb(20 100 40 / 70%) 0px -36px 30px 0px inset,
rgb(100 200 80 / 15%) 0px -79px 40px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
/* =========================================================
3. GROOTTES
---------------------------------------------------------
Ingebouwde Bricks size-classes (Size-dropdown in builder).
Overschrijven alleen font-size en padding van de base.
Bricks default XL: font-size: 1.2em; padding: .8em 1em;
========================================================= */
/* .bricks-button.sm { stap 2 } Klein — Size: Small */
/* .bricks-button.md { stap 2 } Medium — Size: Medium */
/* .bricks-button.lg { stap 2 } Groot — Size: Large */
/* .bricks-button.xl { stap 2 } Extra groot — Size: XL */
/* .bricks-button.xl:hover { stap 2 } */
/* .bricks-button.xl:focus { stap 2 } */
/* =========================================================
4. FORM SUBMIT BUTTON
---------------------------------------------------------
De form submit-button krijgt GEEN .brxe-button maar
wel .bricks-button — target via het form-element.
========================================================= */
/* .brxe-form .bricks-button[type="submit"] { stap 2 } */
/* .brxe-form .bricks-button[type="submit"]:hover { stap 2 } */
/* =========================================================
5. OFF-CANVAS NAV-MENU — extra overrides
---------------------------------------------------------
De nav-links krijgen via de gedeelde selectors hierboven
al de volledige button-look. Hieronder alleen de
nav-specifieke aanpassingen (breedte, spacing).
========================================================= */
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li > a {
width: 100%;
justify-content: center;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li {
margin-bottom: 12px;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li:last-child {
margin-bottom: 0;
}
/* Dropdown parent: flex-rij met tekst-link en sub-toggle naast elkaar */
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li.menu-item-has-children {
display: flex;
gap: 4px;
align-items: stretch;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li.menu-item-has-children > a {
flex: 1;
width: auto;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li.menu-item-has-children > .brx-submenu-toggle {
flex: 0 0 auto;
align-self: stretch;
height: auto;
}
/* ── Sub-menu toggle ── */
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .brx-submenu-toggle {
position: relative;
border-radius: 7px;
transform: translateY(+1.5px);
transition: box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.05, 0.9, 0.1, 1);
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .brx-submenu-toggle::before {
content: '';
position: absolute;
inset: 3% 4%;
border-radius: 7px;
pointer-events: none;
background: rgba(255, 245, 180, 0.10);
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.116),
0 2px 5px rgba(0, 0, 0, 0.219),
0 -1px 4px rgba(0, 0, 0, 0.096),
0 1px 0 rgba(255, 255, 255, 0.10);
transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* Hover én open-staat: zelfde pressed look */
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .brx-submenu-toggle:hover::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li.open > .brx-submenu-toggle::before,
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu > li:has(.sub-menu:hover) > .brx-submenu-toggle::before {
background: rgba(0, 0, 0, 0.08);
box-shadow:
inset 0 7px 18px rgba(0, 0, 0, 0.096),
inset 0 3px 7px rgba(0, 0, 0, 0.247),
inset 0 -1px 5px rgba(0, 0, 0, 0.089),
0 1px 0 rgba(255, 255, 255, 0.08);
}
/* ── Sub-menu items ── */
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .sub-menu li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: 5px;
transform: translateY(+1.5px);
transition: box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.05, 0.9, 0.1, 1);
position: relative;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .sub-menu li a::before {
content: '';
position: absolute;
inset: 3% 2%;
border-radius: 5px;
pointer-events: none;
background: rgba(255, 255, 255, 0.05);
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.10),
0 1px 3px rgba(0, 0, 0, 0.18),
0 1px 0 rgba(255, 255, 255, 0.06);
transition: box-shadow 0.2s ease, background 0.2s ease;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .sub-menu li a:hover {
transform: translateY(0);
box-shadow:
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px;
}
.brxw-header-05__nav-menu.brxe-nav-menu .bricks-nav-menu .sub-menu li a:hover::before {
background: rgba(0, 0, 0, 0.10);
box-shadow:
inset 0 5px 14px rgba(0, 0, 0, 0.10),
inset 0 2px 6px rgba(0, 0, 0, 0.22),
inset 0 -1px 4px rgba(0, 0, 0, 0.08),
0 1px 0 rgba(255, 255, 255, 0.06);
}
/* small buttons kleiner */
.bricks-button.sm {
padding: 1em 3em;
}