Photo by Bernd 📷 Dittrich on Unsplash
Button Neo Brutalism Design Using HTML, CSS, and JavaScript
Create a modern, responsive button design in the neo-brutalist style using HTML, CSS, and JavaScript, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible interactions, and maintainable code, ideal for modern web interfaces.
Prerequisites
- Basic HTML, CSS, and JavaScript knowledge
- A code editor (e.g., VS Code)
Part 1: Button Neo Brutalism Design
Step 1: HTML Structure (index.html)
Create a semantic HTML structure for the neo-brutalist buttons with a container and two buttons (primary and secondary).
<div class="neo-button-container" role="group" aria-label="Neo-brutalist buttons">
<button class="neo-button" aria-label="Primary action button">Click Me</button>
<button class="neo-button secondary" aria-label="Secondary action button">Explore</button>
</div>
Step 2: Core CSS Implementation (styles.css)
Style the buttons with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font.
:root {
--gray-900: #111827;
--gray-700: #374151;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--white: #ffffff;
--primary-600: #2563eb;
--primary-500: #3b82f6;
--accent-500: #f59e0b;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--radius-sm: 4px;
--radius-md: 6px;
--transition: 0.2s ease;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-neo: 6px 6px 0 var(--gray-900);
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
.neo-button-container {
display: flex;
gap: var(--spacing-md);
background: var(--white);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.neo-button {
padding: var(--spacing-md) var(--spacing-lg);
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
color: var(--gray-900);
background: var(--primary-500);
border: 3px solid var(--gray-900);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-neo);
transition: transform var(--transition), box-shadow var(--transition);
cursor: pointer;
text-align: center;
position: relative;
user-select: none;
}
.neo-button:hover {
transform: translate(3px, 3px);
box-shadow: 3px 3px 0 var(--gray-900);
}
.neo-button:active, .neo-button.clicked {
transform: translate(6px, 6px);
box-shadow: none;
}
.neo-button:focus {
outline: none;
box-shadow: 3px 3px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}
.neo-button.secondary {
background: var(--accent-500);
color: var(--gray-900);
}
@media (max-width: 640px) {
.neo-button-container {
flex-direction: column;
padding: var(--spacing-md);
gap: var(--spacing-sm);
}
.neo-button {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem;
}
}
Step 3: JavaScript Implementation (script.js)
Add JavaScript to handle click interactions, applying a temporary "clicked" class for visual feedback and supporting keyboard accessibility.
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('.neo-button');
buttons.forEach(button => {
button.addEventListener('click', () => {
button.classList.add('clicked');
setTimeout(() => {
button.classList.remove('clicked');
}, 200);
});
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
button.click();
}
});
});
});
Explanation
- Layout: Buttons are housed in a flexbox container with a white background, shadow, and rounded corners, mimicking a card. Each button is styled with a monospace font and centered text.
- Styling: Primary buttons use a vibrant blue (
--primary-500), secondary use orange (--accent-500). Thick black borders (3px) and offset shadows (--shadow-neo) create the neo-brutalist raw aesthetic. Minimal radius (4px) keeps edges sharp. - Interactivity: JavaScript applies a
clickedclass on click or keypress (Enter/Space), shifting the button down and removing the shadow for a pressed effect, lasting 200ms. - Visual Feedback: Hover shifts buttons slightly (
translate(3px, 3px)) with a reduced shadow; clicks push further (translate(6px, 6px)) with no shadow. Focus uses a dual shadow (accent and primary colors). - Responsiveness: A media query (
@media (max-width: 640px)) switches the container to a column layout and reduces button padding and font size for mobile usability. - Accessibility:
role="group"andaria-labelon the container and buttons ensure screen reader compatibility.tabindex="0"and keyboard support (Enter/Space) enable navigation. High contrast ratios and bold typography ensure readability.
Accessibility Features
- Use
role="group"andaria-labelfor semantic structure - Ensure high contrast ratios for text and backgrounds (4.5:1 minimum)
- Support keyboard navigation with
tabindex, Enter, and Space keys - Use bold, readable typography (monospace for neo-brutalism)
Golden Rules
- Use CSS variables for consistent theming
- Implement bold borders and heavy shadows for neo-brutalist style
- Ensure accessibility with ARIA and keyboard support
- Optimize for mobile with responsive design
Conclusion
A professional neo-brutalist button should embrace raw, bold aesthetics, provide tactile interactions, remain responsive, and follow accessibility guidelines. This solution uses HTML, CSS, and JavaScript for striking buttons with primary and secondary variants, featuring heavy shadows and a monospace font. Experiment with colors, shadow offsets, or add functionality like form submission. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!
Comments
Post a Comment