Buttons serve many purposes on websites — there are large buttons for hovering over images and navigating around a webpage, and more subtle buttons used to display information about your products or services.
However, buttons can intimidate even experienced web designers. Buttons have many properties that can take a long time to master and can add up to unnecessarily large file sizes in your CSS if used improperly or excessively.
This article will cover how to apply elegant styles to your buttons to create an attractive, reusable button component ready for business. We will also pay particular attention to the accessibility considerations you should consider when making buttons in 2022. Without wasting any more time, let’s get to it.
To jump ahead:
In this section, we’ll be styling two buttons — one plain button, and one retro-style button, both with hover animations.
Creating a button is super easy. All you need to do is insert the following into your HTML code.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<button class = btn>Button</button>
</body>
</html>
I used a class of btn but you can name your button whatever you want. Next comes the more complicated part: styling the button. Here’s what an unstyled button looks like.
To properly style a button, we’ll target the class and make some changes with CSS. We’ve previously talked about how to create and style basic buttons in this article, but today we’re going to be looking at them more closely.
Let’s add some CSS to our button.
.btn {
min-width: 150px;
height: 50px;
color: #fff;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
border-radius: 5px;
z-index: 0;
background: red;
overflow: hidden;
border: 2px solid green;
color: black;
}
Now the button looks a lot better:
If you’d like your button to be rounded, you can increase its border radius to 25px.
You can use a plain button like this for your website, but in 2022, there are more advanced ways to style your buttons. One of the most popular features for styling buttons is animation. By combining CSS animations with CSS hover effects, you can make a plain button responsive, which makes your website more intuitive and fun for users to navigate. This article goes into more detail about animating buttons.
Let’s add animations to our button with the following code.
.btn:hover {
color: #fff;
}
.btn:hover:after {
width: 100%;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
transition: all 0.3s ease;
left: 0;
top: 0;
width: 0;
height: 100%;
background: blue;
}
In the code above, when you hover on the button, there will be a sliding animation that slides in from left to right and changes the background color to blue. You can view the animated button in the codepen below:
See the Pen
Button 1 by fimber elems (@Fimbosky1)
on CodePen.
If you’d like your button animation to move from right to left instead, just change left: 0; to right: 0;.
When styling a button, animations are vital because they bring life to the component. Whether you’re creating a big call-to-action button or a smaller button for a dropdown menu, you can get creative with animations.
Let’s create the second button with a more aesthetically pleasing retro look.
Here’s the HTML:
<button class="btn2">Button 2</button>
Next, let’s input the CSS:
Learn more →.btn2 {
min-width: 130px;
height: 40px;
color: #fff;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
border: 1px solid #000;
color: #000;
background: transparent;
}
.btn2:hover:after {
top: 0;
left: 0;
}
.btn2:after {
content: "";
width: 100%;
z-index: -1;
position: absolute;
height: 100%;
top: 5px;
left: 5px;
transition: 0.7s;
background-color: #40ff3a;
}
The above code will result in this:
If you want to play around with these buttons, check out the codepen below.
See the Pen
Styled buttons by fimber elems (@Fimbosky1)
on CodePen.
You can also check out this codepen for other beautiful buttons you can use:
See the Pen
Candy Color Button Animation by Yuhomyan (@yuhomyan)
on CodePen.
One of the main problems developers face is not knowing when to use buttons. It might sound silly, but it’s a real problem because buttons can easily be replaced by links styled as buttons. While this might work, it’s not a good practice, primarily because of screen readers.
When a screen reader or any sort of assistive device scans a webpage, it gets information about the HTML structure of the page and reads the contents out loud, so using a link element <a> when you should use the <button> element can be problematic for users who have to use these assistive technologies to interact with the page.
Knowing when to use either element is simple. According to Angular, the <button> element should be used for any interaction that performs an action on the current page, and the <a> element should be used for any interaction that navigates to another view or page. It’s that simple!
As a developer, you should know how to use the right semantic HTML element when creating a button. It gives users a reasonable expectation of the control’s behavior, allows you to write lighter and better code, and makes your site easier to maintain.
You can check out this article to learn more about modern web applications’ links vs. buttons.
Button sizes are a vital part of styling buttons in 2022. So vital, in fact, that Apple included a recommended button size of 44x44px in the iPhone Human Interface Guidelines. Smaller buttons lead to poor accessibility for people who have reduced dexterity, and increase error rates for your site.
Using the right sized buttons also improves your site’s SEO or web app, because Google and other search engines rank pages based on how mobile-friendly they are. Making sure your buttons are both big and far enough apart increases the accessibility of your page and allows it to rank higher.
We discussed using the <button> element above, but let’s delve deeper into it. The importance of using the correct semantic HTML element has a heavy impact on the accessibility of a site, and I’ll briefly explain why.
First, let’s recreate the first button we used earlier, but this time, instead of using the <button> element, we will create the button using a div.
Here’s the HTML:
<div class="btn3">Button 3</div>
Now, here’s the CSS:
.btn3 {
display: flex;
align-items: center;
min-width: 150px;
height: 35px;
color: #fff;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
margin-left: 20px;
outline: none;
border-radius: 25px;
z-index: 0;
background: red;
overflow: hidden;
border: 2px solid green;
color: black;
}
.btn3:hover {
color: #fff;
}
.btn3:hover:after {
width: 100%;
}
.btn3:after {
content: "";
position: absolute;
z-index: -1;
transition: all 0.3s ease;
left: 0;
top: 0;
width: 0;
height: 100%;
background: blue;
}
The result of the code above will look like this.
Put side by side with our original button, an average person would find it challenging to pick out the actual button between the two, given that with a bit of JavaScript, you can make them both do the same thing.
And
While these two components may look the same, behave the same, and complete the same action, using the <div> or <a> element mentioned earlier to recreate a button will negatively affect your site by breaking keyboard navigation, shifting browser focus, and confusing screen readers. Here’s how that happens.
One of the most important aspects of web accessibility is keyboard navigation. This is primarily due to the vast number of people with motor disabilities who have to use a keyboard for web navigation. They have to use the Tab button to navigate through interactive components like links, buttons, etc.
In the example we created above, people who use keyboard navigation will only be able to use the Tab button to focus and click on the button created using the <button> element. The same cannot be done with the button created using the <div> element because while they both look the same, the browser cares more about what the element is than what it looks like.
While keyboard navigation allows users to focus on links that are styled as buttons, like I previously explained, that’s unwise because it messes with screen readers.
Inappropriately shifting browser focus usually happens when the <a> element is used to create a button rather than the <button> element. The <a> element is designed for off-page navigation, so when it’s used for on-page trigger actions, it causes an accessibility problem, making the browser shift focus inappropriately and resulting in bad UX on the site.
That brings us to the end of this article. Styling a button can be complicated, but getting the hang of it is fun. There are many reasons you should know how to style a button properly, from better SEO and aesthetics to better accessibility and performance for your site. I hope this article is helpful to you and becomes your button cheat sheet. Until next time!
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
