How to Change Button Size in HTML?

Last Updated : 28 Mar, 2024

Changing the size of a button in HTML is a common task in web design. It can be achieved using various methods, such as Style Attribute, and external CSS, or by modifying the button’s padding and font size.

These are the following approaches:

Table of Content

Using Style Attribute
Using External CSS
Using Padding and Font Size

Using S`tyle` Attribute

In this approach, the HTML file defines a button element with inline styling via the style attribute, setting its width to 200 pixels and height to 50 pixels directly within the style attribute.

Example: Implementation of Changing button size in HTML using Style Attribute.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Button Size</title>
</head>

<body>
    <button style="width: 200px; height: 50px;">
        Click Me!
    </button>
</body>

</html>

Output:

Using External CSS

In this approach, the HTML file links to an external CSS file. Within this CSS file, the “.large-button” class is defined, setting the button’s width to 200 pixels, height to 50 pixels, and background color to a shade of green. This styling applies to the button in the HTML body, resulting in a larger-sized button with a green background.

Example: Implementation of Changing button size in HTML using External CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Button Size</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button class="large-button">
        Click Me!
    </button>
</body>

</html>

CSS

.large-button {
    width: 200px;
    height: 50px;
    background-color: rgb(170, 218, 202);
}

Output:

Output

Using Padding and Font Size

In this approach, the padding and the font size properties are used to change button size in HTML. The padding property is used to increase the space inside the button, effectively making it larger. Here, 20px padding is added to the top and bottom, and 40px padding is added to the left and right. The font-size property is used to increase the size of the text inside the button.

Example: Implementation of Changing button size in HTML using Padding and Font Size.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Button Size</title>

    <style>
        .large-button {
            padding: 12px 70px;
            font-size: 16px;
            border-radius: 10px;
            border: 2px solid black;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button class="large-button">
        Click Me!
    </button>
</body>

</html>