Better CSS button outlines

This is a CSS showcase for all kinds of custom created button outlines as part of my article on better CSS outlines.

You can test the outlines by clicking on them, or using the tab-key on your keyboard.

Want to see how other big brands are doing? Check https://zellwk.com/blog/design-focus-style/

Apparantly, I ain't the first to come up with this idea, but it seems I did find a more flexible setup for customizing it.

Normal and inverted examples

A bit confusing, but Bootstrap is calling white buttons, .btn-outline-*. I'll be calling them inverted buttons instead.

Success button Inverted success button

Different outline examples

No matter the button- or background-colors, it now is very easy to change the outline style of all buttons.
Obviously, when using a build tool this might be done for you automatically. However, even without a build tool, it is a 5 second job to change characteristics of all buttons y just changing the CSS properties of the ::before pseudo-class, no matter the color. You could think of the following.

Inner outline

Success button Primary button

.btn-outline-inner::before {
	margin: 0.3rem;
	color: #000!important;
}
		

Do note that this is't ideal on buttons with darker background-colors. But you can still make exceptions per button-style as I did with the primary button, giving our custom outline a white color.

Offsetted outline

Success button Primary button

.btn-outline-offset::before {
	margin: -4px;
}
		

Transformed outline

You can animate and even combine different outline styling. The first button has an animated outline. The second button has an outline animation on top of an offsetted outline.

Success button Primary button

.btn-outline-scale::before {
	transform: scale(1.2);
	transition-duration: 0.2s;
}
.btn-outline-scale:focus::before {
	transform: scale(1);
}
		

Dark mode

It now is quite easy to change properties in certain situations, such as in dark-mode. In case users can toggle between light-mode and dark-mode, there is no need to make complex changes in your CSS codebase.

Default outline on dark background

Success button Primary button

.bg-dark .btn:focus::before {
	border: 1px solid #e5e9f2;
}
		

Offsetted outline on dark background

Success button Primary button

.bg-dark.thick-outline .btn:focus::before {
	border-color: transparent;
	color: #e5e9f2;
	opacity: 1;
}