How to use Padding and Font Size In HTML
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.
<!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:
How to Change Button Size in HTML?
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