Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Change the padding of a button with CSS
The CSS padding property allows you to control the space between a button's content (text or icon) and its borders. This spacing is crucial for creating visually appealing and user-friendly buttons that are easy to click.
Syntax
button {
padding: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines padding in px, em, rem, etc. |
% |
Percentage of the containing element's width |
top right bottom left |
Four values for each side individually |
vertical horizontal |
Two values for vertical and horizontal padding |
Example 1: Different Padding Values
The following example shows buttons with different padding values −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
text-align: center;
font-family: Arial, sans-serif;
}
.btn {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
font-size: 16px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
}
.small-padding {
padding: 5px 10px;
}
.medium-padding {
padding: 15px 25px;
}
.large-padding {
padding: 25px 40px;
}
</style>
</head>
<body>
<button class="btn small-padding">Small Padding</button>
<button class="btn medium-padding">Medium Padding</button>
<button class="btn large-padding">Large Padding</button>
</body>
</html>
Three green buttons with different sizes appear on the page. The first button is compact with small padding, the second is moderately sized, and the third is large with generous padding around the text.
Example 2: Padded vs Normal Button
This example demonstrates the difference between a default button and a custom padded button −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f9f9f9;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.custom-btn {
background-color: #2196F3;
border: none;
color: white;
padding: 20px 30px;
font-size: 18px;
margin: 10px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s;
}
.custom-btn:hover {
background-color: #0b7dda;
}
button {
margin: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h3>Button Comparison</h3>
<button>Default Button</button>
<br>
<button class="custom-btn">Custom Padded Button</button>
</body>
</html>
Two buttons are displayed: a small default button with minimal padding and a larger blue button with generous padding (20px vertical, 30px horizontal) that appears more prominent and clickable.
Conclusion
CSS padding is essential for creating well-designed buttons that provide adequate click area and visual appeal. Use appropriate padding values to ensure buttons are easily accessible and maintain good design balance.
Updated on: 2026-03-15T12:55:14+05:30
5K+ Views
Advertisements