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 attribute and fontSize field

We add a typical click listener and click handler to our button. This can be done in a variety of ways but I used getElementById .

I passed a reference to the button as a parameter to the click handler. Inside the click handler, I accessed the style prop on the button. The style prop is a JS way of changing CSS values on the button.

In particular, I updated jsButton.style.fontSize = "1.5rem"; . This overwrote the 18px font size that was applied to the button by the button CSS selector.

We can see the in dev tools that JS style.fontSize overrides CSS styling because it is like inline styling:

Here’s the code for this example:

//html
<button id="jsFontSize" type="button">
  JS Font Size!
</button>

//JS
const handleJSBtnClick = (jsButton: HTMLButtonElement) => {
  jsButton.style.fontSize = "1.5rem";
  console.log("Bigger!");
};

const jsFSButton = document.getElementById("jsFontSize") as HTMLButtonElement;
if (jsFSButton) {
  jsFSButton.addEventListener("click", () => handleJSBtnClick(jsFSButton));
}

Change HTML Button Font Size with CSS

Changing HTML Button Font Size with CSS requires a little bit of JavaScript if we are doing it dynamically in response to a click event.

Once again we need a click listener and click handler. Now we need a class in our CSS file and a bit of JS to apply that class.

I created a class called bigFont and gave it a font-size: 1.5remvalue. In the click handler I access the button’s classList and add the bigFont class. The syntax for this is cssFSButton.classList.add("bigFont"); .

We can see the new class applied in dev tools and also see that it’s font size is overriding the button selector’s font size.

Here’s the code for this example:

//HTML
<button id="cssFontSize" tabindex="-1">
  CSS Font Size!
</button>

//JS
const handleCSSBtnClick = (
  event: MouseEvent,
  cssFSButton: HTMLButtonElement
) => {
  cssFSButton.classList.add("bigFont");
};

const cssFSButton = document.getElementById("cssFontSize") as HTMLButtonElement;
if (cssFSButton) {
  cssFSButton.addEventListener("click", (event: MouseEvent) => {
    handleCSSBtnClick(event, cssFSButton);
  });
  cssFSButton.addEventListener("keypress", (event: MouseEvent) => {
    event.preventDefault();
  });
}

//CSS
.bigFont {
  font-size: 1.5rem;
}

Here’s a live Code Sandbox example. For further reading, here’s how to disable and HTML button with CSS or JS.