Change Button Font Size with JavaScript or CSS: 2 Easy Ways!

Sometimes it’s good to revisit HTML, CSS, and JavaScript and remember how to do the basics without the help of third-party libraries. In this tutorial I will update a button’s font size in two ways:

• Using JavaScript to update a button’s style.fontSize attribute
• Using CSS to update a button’s classList with a class that increases font size

The buttons in this example start out with 18px font applied using the button selector seen below in my CSS file:

button {
  font-size: 18px;
  border-radius: 4px;
  background-color: #1e73be;
  color: white;
  padding: 6px 12px;
  cursor: pointer;
  border: 4px solid #1e80be;
  width: 240px;
  margin: 12px;
}

Before we explore the technical how-to, I want to mention that it is usually better to control element font size with CSS and values such as rem ,em , and % than pixel values. If you use rem the font size of your buttons will scale with the root font size and you likely won’t need to use JS to change the font size.

However, if you have a use case where you want to increase button font size using JavaScript, read on!

Change HTML Button Font Size with JavaScript

We can change button font size using vanilla JS with three simple tools:

• a click listener
• a click handler
• accessing the style…