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:
Using Style
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>
Output:
Output
Share your thoughts in the comments
Please Login to comment...