Why Default Button Styles Exist
Every browser ships with its own stylesheet that defines how HTML elements should appear by default. These "user agent stylesheets" include specific rules for button elements that reflect the native look and feel of the operating system.
Buttons are one of the most fundamental interactive elements in web development, yet they come with a surprising amount of default styling that varies across browsers. Understanding how to properly override these defaults is essential for creating consistent, accessible, and performant user interfaces. Whether you're building a modern Next.js application or maintaining a legacy codebase, mastering button styling will improve both the visual consistency and the user experience of your projects.
The Browser Inconsistency Problem
This is where things get complicated. Setting border: 0 on a button behaves differently in Chrome versus Firefox--Chrome removes both the border and background, while Firefox keeps the background.
These subtle differences mean that a button that looks perfect in your development browser might appear broken in others. A comprehensive approach to cross-browser consistency is essential for delivering a polished user experience across all platforms.
1/* Chrome: border:0 removes both */2button {3 border: 0; /* Removes border AND background */4}5 6/* Firefox: border:0 keeps background */7button {8 border: 0; /* Only removes the border */9 background: none; /* Need this too */10}The Complete Button Reset
The "Unbuttonize Mixin" provides a comprehensive solution for removing all default button styles. Here are the core properties you need to reset:
1button {2 /* Remove default styling */3 background-color: transparent;4 border: none;5 margin: 0;6 padding: 0;7 text-align: inherit;8 font: inherit;9 border-radius: 0;10 appearance: none; /* Strip remaining native styling */11}The Modern Approach: all: unset
For newer projects, CSS provides a shorthand property that can reset all properties at once. The all: unset property is an elegant solution for removing default button styles.
However, be aware that this approach has compatibility considerations--Safari historically had bugs with all: unset, so thorough testing across target browsers is essential. For maximum compatibility, the explicit property approach shown above remains the recommended choice for production websites.
When working with modern CSS in your web development projects, weighing the benefits of new shorthand properties against browser compatibility requirements is an important decision for any development team.
1/* Modern shorthand approach */2button {3 all: unset;4}5 6/* Still need cursor pointer */7button:hover {8 cursor: pointer;9}Accessibility Considerations
The most important reason to use actual <button> elements (rather than styled <div> elements) is the built-in keyboard support. Button elements provide keyboard events for free, and they announce correctly to screen reader users.
Maintaining Focus Indicators
Never remove outline without providing an alternative focus indicator. Your button styles should include clear :focus states that help keyboard users understand which element is active.
Implementing proper accessibility best practices not only helps users with disabilities but also improves your site's overall usability and search engine rankings.
1button:hover {2 cursor: pointer;3}4 5button:focus-visible {6 outline: 2px solid currentColor;7 outline-offset: 2px;8}9 10button:active {11 transform: scale(0.98);12}13 14button:disabled {15 cursor: not-allowed;16 opacity: 0.5;17}Complete Button Styling System
Building on the reset foundation, here's how to construct a maintainable button system. Modern CSS features like CSS custom properties (variables) can improve performance by reducing code repetition in your Next.js project. By centralizing your button tokens in a single location, you create a scalable foundation that makes updating styles across your application straightforward.
A token-based approach also improves maintainability for your entire web development workflow, ensuring consistency whether you're building new pages or maintaining existing ones. For teams looking to scale their CSS architecture, consider how AI-powered development workflows can help automate repetitive styling tasks and maintain consistency across large codebases.
1:root {2 --button-bg: #3b82f6;3 --button-text: #ffffff;4 --button-padding: 0.75rem 1.5rem;5 --button-radius: 0.375rem;6}7 8/* Base button reset */9button {10 appearance: none;11 background: transparent;12 border: none;13 border-radius: 0;14 font: inherit;15 margin: 0;16 padding: 0;17 text-align: inherit;18 cursor: pointer;19}20 21/* Primary button style */22.btn-primary {23 background-color: var(--button-bg);24 color: var(--button-text);25 padding: var(--button-padding);26 border-radius: var(--button-radius);27}28 29/* Interactive states */30.btn-primary:hover {31 filter: brightness(1.1);32}33 34.btn-primary:focus-visible {35 outline: 2px solid currentColor;36 outline-offset: 2px;37}38 39.btn-primary:active {40 transform: scale(0.98);41}Common Pitfalls and How to Avoid Them
Forgetting Cross-Browser Testing
The most common mistake is assuming all browsers render button styles identically. Always test your button components in Chrome, Firefox, Safari, and Edge to catch inconsistencies before they reach production.
Over-Removing Default Behaviors
While removing default styling is important, some behaviors should be preserved or intentionally replaced. The cursor: pointer on hover provides important user feedback that helps users understand elements are interactive.
Ignoring Mobile Touch Targets
Buttons should have a minimum touch target of 44x44 pixels for mobile users, according to accessibility guidelines. Your button styles should account for adequate spacing and sizing to ensure comfortable interaction on touch devices.
Reset Core Properties
Start with background-color, border, margin, padding, font, and appearance to strip all default button styling.
Test Cross-Browser
Different browsers handle button properties differently--always verify your styles in Chrome, Firefox, Safari, and Edge.
Preserve Accessibility
Maintain keyboard navigation and focus states. Never remove focus outline without providing an alternative indicator.
Use CSS Variables
Implement a token-based system with CSS custom properties for maintainable, performant button styling.
Frequently Asked Questions
Why don't buttons inherit fonts from the parent element?
Buttons have their own font-family defined in the browser's user agent stylesheet. You must explicitly set `font: inherit` to make buttons use your application's typography.
Should I use all: unset for button resets?
all: unset works in modern browsers but has had Safari bugs historically. For production sites, use explicit property resets for maximum compatibility, or test thoroughly if using all: unset.
How do I style button focus states for accessibility?
Use `:focus-visible` to apply visible focus indicators only when navigating by keyboard. Combine with `outline-offset` for clear, high-contrast focus rings.
What's the minimum size for accessible buttons?
Touch targets should be at least 44x44 pixels for mobile users. Add padding or ensure your button content provides adequate clickable area.
Fun Viewport Units
Explore creative uses of viewport units like vw, vh, vmin, and vmax for responsive design.
Learn moreShake CSS Keyframe Animation
Create attention-grabbing shake animations for form validation and UI feedback.
Learn moreMulti Line Truncation With Pure CSS
Master text truncation with line-clamp for beautiful, consistent text truncation.
Learn more