Neobrutalist Bootstrap Buttons: Raw, Edgy, Digital

Neobrutalist Bootstrap Buttons is a CSS utility library for the Bootstrap framework that transforms your standard Bootstrap buttons into striking neobrutalist elements with sharp corners, thick borders, and a bold color palette of white, black, and orange.

Neobrutalism in web design embraces an intentionally unrefined aesthetic characterized by sharp corners instead of rounded edges, prominent borders that create visual separation, and deliberate shadows that add physical dimension to digital elements. The library implements these principles through a focused color palette of white, black, and orange for maximum visual impact.

Features:

• Neobrutalist Style: Buttons have sharp corners, thick borders, and offset shadows.
• Focused Color Palette: We use white, black, and orange for high contrast.
• Bootstrap Variable Overrides: Changes are made by redefining CSS variables. This keeps things maintainable.
• Styles for All Button Types: The look applies to all standard Bootstrap button variations: .btn, .btn-primary, .btn-secondary, etc., including outline buttons (.btn-outline-*) and link buttons (.btn-link).
• Enhanced Interactions: Hover and active states have pronounced effects. You’ll see larger shadows and a “pressed” look.
• Clean CSS: The neobrutalist-bootstrap-buttons.css file is well-commented. You can easily customize it.

How to use it:

1. Download the Neobrutalist Bootstrap Buttons package and load the neobrutalist-bootstrap-buttons.css stylesheet after Bootstrap.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/neobrutalist-bootstrap-buttons.css">

2. That’s it! All Bootstrap buttons in your project will now display with the neobrutalist styling. No additional classes or markup changes are required.

<button type="button" class="btn btn-primary">Primary (Orange)</button>
<button type="button" class="btn btn-secondary">Secondary (Black)</button>
<button type="button" class="btn btn-success">Success (White/Orange Border)</button>
<button type="button" class="btn btn-danger">Danger (Orange/Black Border)</button>
<button type="button" class="btn btn-warning">Warning (Black/Orange Border)</button>
<button type="button" class="btn btn-info">Info (White/Orange Border)</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline</button>
<button type="button" class="btn btn-outline-success">Success Outline</button>
<button type="button" class="btn btn-outline-danger">Danger Outline</button>
<button type="button" class="btn btn-outline-warning">Warning Outline</button>
<button type="button" class="btn btn-outline-info">Info Outline</button>
<button type="button" class="btn btn-outline-light">Light Outline</button>
<button type="button" class="btn btn-outline-dark">Dark Outline</button>

3. You can modify the neobrutalist appearance by adjusting variables in the CSS file:

:root {
  --bs-white: #fff;
  --bs-black: #000;
  --bs-orange: #ffa500; /* Define your orange color */
  --neobrutalist-border-width: 2px; /* Adjust for thicker borders */
}

/* Base button styles - for .btn class */
.btn {
  --bs-btn-color: var(--bs-black); /* Default text color: Black */
  --bs-btn-bg: var(--bs-white);    /* Default background: White */
  --bs-btn-border-color: var(--bs-black); /* Default border: Black */
  --bs-btn-border-width: var(--neobrutalist-border-width); /* Thicker border */
  --bs-btn-border-radius: 0; /* Sharp corners */
  box-shadow: 2px 2px 0 var(--bs-black); /* Subtle offset shadow for depth */
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Include box-shadow in transition */
}

The post Neobrutalist Bootstrap Buttons: Raw, Edgy, Digital appeared first on CSS Script.