/* =========================================================
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
Geldt voor elke standalone Button op de site.
========================================================= */
.bricks-button {
/* layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
/* background: linear-gradient(125deg, #2271b1, #2271b1); */
background: linear-gradient(125deg, #b9c7eb, #44ace9);
color: #fff;
border: unset;
position: relative;
/* vorm */
border-radius: 3px;
padding: 25px 106px;
transform: translateY(+1.5px);
/* verzonden tekst */
text-shadow:
0 -1px 2px rgba(0, 0, 0, 0.6),
0 1px 1px rgba(255, 255, 255, 0.10);
/* typografie */
/* font-size: 20px;
font-family: "Lato";
letter-spacing: 2px; */
/* schaduw */
box-shadow:
rgb(118 136 191 / 24%) 0px -23px 25px 0px inset,
rgb(15 34 87) 0px -36px 30px 0px inset,
rgb(100 140 210 / 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;
/* transitie */
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.05, 0.9, 0.1, 1);
text-decoration: none;
cursor: pointer;
}
/* verzonden rechthoek */
.bricks-button::before {
content: '';
position: absolute;
inset: 6% 2%;
border-radius: 2px;
pointer-events: none;
background: rgba(226, 226, 226, 0.185);
box-shadow:
inset 0 5px 14px rgba(0, 0, 0, 0.116),
inset 0 2px 5px rgba(0, 0, 0, 0.219),
inset 5px 0 9px rgba(0, 0, 0, 0.068),
inset -5px 0 9px rgba(0, 0, 0, 0.103),
inset 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;
}
.bricks-button:hover::before {
background: rgba(226, 226, 226, 0.10);
box-shadow:
inset 0 7px 18px rgba(0, 0, 0, 0.22),
inset 0 3px 7px rgba(0, 0, 0, 0.35),
inset 6px 0 12px rgba(0, 0, 0, 0.13),
inset -6px 0 12px rgba(0, 0, 0, 0.16),
inset 0 -1px 5px rgba(0, 0, 0, 0.14),
0 1px 0 rgba(255, 255, 255, 0.10);
}
@media (max-width: 768px) {
.bricks-button {
width: 100%;
padding-left: 0;
padding-right: 0;
}
}
.bricks-button:hover {
background: linear-gradient(125deg, #3295e5, #2fa2ff);
transform: translateY(0);
box-shadow:
rgb(10 10 10 / 19%) 0px -23px 25px 0px inset,
rgb(30 37 105 / 92%) 0px -36px 30px 0px inset,
rgb(50 170 200 / 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;
}
.bricks-button:focus-visible {
box-shadow:
rgb(145 145 145 / 17%) 0px -23px 25px 0px inset,
rgb(25 55 130 / 70%) 0px -36px 30px 0px inset,
rgb(180 200 235 / 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(80 110 195 / 28%) 0px 15px 16px;
}
/* =========================================================
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 } */
/* =========================================================
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. PLUGIN BUTTONS
---------------------------------------------------------
Let op: plugin-stijlen horen idealiter in plugins.css.
Hier tijdelijk geplaatst — verplaatsen naar plugins.css
zodra de button-stijlen gekristalliseerd zijn.
========================================================= */
/* --- Complianz cookie banner ---------------------------- */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
border: unset !important;
border-radius: 5px !important;
box-shadow:
rgb(50 50 93 / 25%) 0px 40px 100px -20px,
rgb(0 0 0 / 30%) 0px 30px 60px -30px,
rgb(10 37 64) 1px 0px 14px 2px inset !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
/* TODO: vervangen door var(--color-danger) of vergelijkbaar */
background: linear-gradient(125deg, #f14b4b, #df0000);
border: unset !important;
border-radius: 5px !important;
box-shadow:
rgb(50 50 93 / 25%) 0px 40px 100px -20px,
rgb(0 0 0 / 30%) 0px 30px 60px -30px,
rgb(10 37 64) 1px 0px 14px 2px inset !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
background: linear-gradient(125deg, #ffa045, #ff0000);
color: white !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
display: none !important;
}