Demo is here.
Please don't use <a>
for buttons. They have different meaning and behaviour. Link responses to Enter key (will trigger onClick action), button responses to Space. If user focuses on <a>
, which is styled as button and uses Space page will be scrolled instead of action. <a>
used for navigation, user can Ctrl/Cmd click it, to open in new tab. <a>
is not focusable in Firefox. What I try to say <a>
and <button>
has quite big difference in behaviour and semantics.
You should be able to use <button>
everywhere, but if you want something else you can use <div role="button" tabindex=0>
as well. There is <input type="button" />
if you want something old-school.
<button>
<span role="img" aria-label="unicorn">
🦄
</span>{" "}
Button
</button>
<button>
comes with predefined styles, but if we want to customize it we can start with resetting styles
/* reset button styles https://css-tricks.com/overriding-default-button-styles/ */
button {
border: none;
padding: 0;
margin: 0;
cursor: pointer;
/* not needed in modern browsers */
-webkit-appearance: none;
-moz-appearance: none;
}
Let's make our button look like a button
<button className="button">
/* inspired by https://codepen.io/liamj/pen/vvdRdR */
.button {
--color-dark: #333;
--color-light: #fff;
display: block;
position: relative;
font-size: 2rem;
padding: 1rem 2rem;
border-radius: 0.4rem;
background: var(--color-light);
color: var(--color-dark);
border: 0.2rem solid var(--color-dark);
box-shadow: 0 0.2rem 0 0 var(--color-dark);
}
The button should provide active state, so a user would know that the button responds to click.
.button:active {
top: 0.2rem;
box-shadow: none;
}
The button should provide disabled state, so a user would know that button is not clickable.
<button className="button" disabled>
.button:disabled {
--color-dark: #999;
cursor: not-allowed;
}
Almost there, but Emoji doesn't change color.
.button:disabled {
--color-dark: #999;
cursor: not-allowed;
/* see https://www.bram.us/2016/10/06/emoji-silhouettes-and-emoji-outlines-with-css/ */
color: transparent;
text-shadow: 0 0 0 var(--color-dark);
}
The button should provide a focused state, so a user would know where is the focus, otherwise, the user would need to guess or tab to closest element which provides focus. There is a focus state out of the box provided by the browser:
Chrome:
Firefox:
Safari:
In Safari buttons are not "tapable" 🤦
Let's remove default focus state:
/* https://fvsch.com/styling-buttons/ */
.button:focus {
outline: none;
}
.button::-moz-focus-inner {
border: none;
}
Don't remove the outline unless you provide alternative
Let's add custom outline:
.button:focus {
outline: none;
box-shadow: 0 0.2rem 0 0 var(--color-dark), 0 2px 5px 3px #f0f;
}
Because we use box-shadow
for both :active
and :focus
they can conflict and we need to take care of special case:
.button:active:focus {
top: 0.2rem;
box-shadow: 0 0px 6px 4px #f0f;
}
There is no need to show focus for mouse users, it is only useful for keyboard users. So there is a proposal to add :focus-visible
state to do that. Meantime we can use a polyfill or implement this functionality ourselves.
import "focus-visible";
.js-focus-visible :focus:not(.focus-visible) {
box-shadow: 0 0.2rem 0 0 var(--color-dark);
}
.js-focus-visible :active:not(.focus-visible) {
top: 0.2rem;
box-shadow: none;
}
The touchscreen has special requirements for buttons as well
According to many sources (1, 2, 3) size of button on touch devices should be about 1cm.
button {
min-width: 1cm;
min-height: 1cm;
}
As well there should be enough space around adjacent buttons to prevent wrong button clicks.
When the user taps the button on touch device they cover the button with the finger, so they can't see the active state of the button. So they need a special active state which will be visible sometime after they take off the finger. For example, the Material design uses a ripple effect for this.
button {
user-select: none;
/* https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/ */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Let's create our own after tap effect
/* https://css-tricks.com/touch-devices-not-judged-size/ */
@media (hover: none) {
/* inspired by https://codepen.io/numerical/pen/XJKeop */
.button ::after {
content: "";
display: block;
height: 100px;
position: absolute;
transform: translate3d(-150%, -50px, 0) rotate3d(0, 0, 1, 45deg);
width: 200px;
}
.button.active ::after {
background-image: linear-gradient(
to top,
rgba(255, 0, 255, 0.1),
rgba(255, 0, 255, 0.9)
);
transition: all 2.2s cubic-bezier(0.19, 1, 0.22, 1);
transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
}
}
And a bit of JS to toggle class after mouse up
const Button = ({ children }) => {
const [activated, setActivated] = React.useState(false);
return (
<button
className={"button" + (activated ? " active" : "")}
onMouseDown={() => setActivated(false)}
onMouseUp={() => setActivated(true)}
>
{children}
</button>
);
};
I made it with React, but it can be achieved with plain HTML and CSS as well. I hope your main take away will be UX of a button, not the code itself.