A whimsical 3D pure CSS button
Button Deluxe is a further development/refinement/SASS-integration of Josh Comeau's whimsical 3D Button. It differs in quite a few places, but the main differences are:
box-shadowinstead of a separate shadow span (unavoidable because of the previous point)
SASS source/compiled CSS files available at the bottom of this page.
Below are Bootstrap's
btn buttons, and their 'deluxed' counterparts. Integration is based on bootstrap 5.1.3,
streamlined using its native SASS files as much as possible.
<button type="button" role="button" class="btn btn-primary"> Primary </button>
<button type="button" role="button" class="btn btn-deluxe btn-primary"> <span class="btn-deluxe-front">Primary</span> <span class="btn-deluxe-edge"></span> </button>
Note: using webfonts with outlined btn-deluxe buttons can cause miscalculated widths in Chrome (due to resulting fractional pixel values). This will cause the button's front to miss a right border in some situations. As of v3, I don't have a workaround for this yet.
<button type="button" role="button" class="btn btn-outline-primary">
<button type="button" role="button" class="btn btn-deluxe btn-outline-primary"> <span class="btn-deluxe-front">Primary</span> <span class="btn-deluxe-edge"></span> </button>
Foundation for all btn-deluxe elements, using the default color scheme (see first two buttons)
Same as above, but with additional CSS for full integration in Bootstrap (5).
Make sure you add the two required inner span elements:
(the latter containing the button's label/text)
to each button, and add the
btn-deluxe class to all
The SASS source requires:
_functions.scss(native Bootstrap 5 SASS)
_variables.scss(native Bootstrap 5 SASS)
Provides military-style buttons, like those seen in cold war-era Titan missile silo launch control centers.
Use the (commented) variables in
btn-deluxe-v3.scss to change styling and behaviour, and/or:
Each button has its basic styling set using CSS variables. These are slightly limited compared to the variables in the SASS source, but still allow a fair amount of customization. You can write your own CSS class to override/customize these parameters:
--but-deluxe-txt(hex) Text color
--but-deluxe-hue(deg) Hue for button base color
--but-deluxe-sat(%) Saturation for button base color
--but-deluxe-bri(%) Lightness/brightness for button base color
--but-deluxe-alt-hue(deg) Hue for color used in gradient
--but-deluxe-alt-sat(%) Saturation for color used in gradient
--but-deluxe-alt-bri(%) Lightness/brightness for color used in gradient
--but-deluxe-shade-angle(deg) Angle for button gradient
--btn-deluxe-trans-duration(ms/s) Basic animation speed
--btn-deluxe-round(px/em/rem) Roundness of button's corners
--btn-deluxe-up(px/em/rem) 'Thickness' of button in the 'up' (non-depressed) state
--btn-deluxe-shadowsize(px/em/rem) Size of the button's shadow
activeclass toggling (via
data-bs-toggle="button") seems to be delayed somewhat, causing the button to 'pop up' again first before entering active state.