How to Change Button Size with JavaScript or CSS (3 Ways!)

I will show three examples of changing an HTML button’s size. Two of these use JavaScript and one is mostly CSS.

The buttons start with min-width: 240px and no set height.

Before we explore the technical how-to, I want to mention that it is usually good practice to set button min-width rather than width. This makes buttons mobile responsive and more web accessible.

However, if you have a use case where you want to change button size (width and height) using JavaScript, read on!

Statically Change Button Size with JavaScript

Button height and width can be updated using JavaScript and accessing the style attribute of the button. This uses JavaScript to apply inline styling to the button.

We add the usual click listener and click handler. Inside the click handler it gets interesting. We take the passed button and update jsButton.style.width = "300px"; and jsButton.style.height = "100px"; .

We can see in dev tools that this overrides the 240px width set by my button selector in my CSS file:

And we can see that it is applied with inline styling.

This method is not aware of the button’s current size. It simply overwrites whatever currently exists.

Here’s the full code:

//HTML
<button id="jsStaticSize" type="button">
  JS Button Static Size!
</button>

//JS
const handleJSStaticBtnClick = (jsButton: HTMLButtonElement) => {
  jsButton.style.width = "300px";
  jsButton.style.height = "100px";
  console.log("Bigger!");
};

const jsStaticButton = document.getElementById(
  "jsStaticSize"
) as HTMLButtonElement;
if (jsStaticButton) {
  jsStaticButton.addEventListener("click", () =>
    handleJSStaticBtnClick(jsStaticButton)
  );
}

Dynamically Change Button Size with JavaScript

If we want to know the current button size and use that in our calculation of a new button size, we need to use getBoundingClientRect . It is a great function built into elements and contains information about size and position in the viewport.

This time in our click handler we access the current height and width of the button and increase the size by 50%. Here’s the code:

//HTML
<button id="cssSize" tabindex="-1">
  CSS Button Size!
</button>

//JS
const handleJSDynamicBtnClick = (jsButton: HTMLButtonElement) => {
  jsButton.style.width = `${jsButton.getBoundingClientRect().width * 1.5}px`;
  jsButton.style.height = `${jsButton.getBoundingClientRect().height * 1.5}px`;
  console.log("2X Bigger!");
};

const jsDynamicButton = document.getElementById(
  "jsDynamicSize"
) as HTMLButtonElement;
if (jsDynamicButton) {
  jsDynamicButton.addEventListener("click", () =>
    handleJSDynamicBtnClick(jsDynamicButton)
  );
}

Once again we used inline styling to actually apply the changes. However, the size values are more relevant to how the button was originally styled.

Change Button Size with CSS

Changing HTML button size with CSS can be done by applying an additional class. If we want to change size on button click, we need a little JS as well.

In the click handler for our button, we can access the button’s classList and modify it with add. I am adding the bigSizeclass which has width: 300px and height: 100px.

Here’s the code:

//HTML
<button id="cssSize" tabindex="-1">
  CSS Button Size!
</button>

//JS
const handleCSSBtnClick = (
  event: MouseEvent,
  cssSizeButton: HTMLButtonElement
) => {
  cssSizeButton.classList.add("bigSize");
  console.log(event);
};

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

Dev Tools style section reflects the new class we added:

Here’s my post on changing button font size with CSS or JS.

Here’s a live Code Sandbox link.

W3 Schools demo is a good resource for JS button size.