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
Set the width of a button with CSS
The CSS width property is used to set the width of a button. By default, buttons size themselves based on their content, but you can control their width using CSS to create consistent button layouts.
Syntax
button {
width: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value - button width adjusts to content |
length |
Sets width using px, em, rem, etc. |
% |
Sets width as percentage of parent container |
max-content |
Width based on content size |
Example: Fixed Width Button
The following example sets a button width to 150px with styling −
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: #4CAF50;
color: white;
width: 150px;
height: 50px;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn">Click Me</button>
</body>
</html>
A green button with fixed width of 150px, white text "Click Me", and rounded corners appears on the page.
Example: Percentage Width Button
You can also set button width as a percentage of its container −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 2px solid #ccc;
padding: 20px;
}
.btn-full {
width: 100%;
background-color: #007BFF;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn-full">Full Width Button</button>
</div>
</body>
</html>
A blue button that spans the full width of its container (300px) with white text "Full Width Button" appears inside a bordered container.
Conclusion
The width property gives you control over button sizing. Use fixed values for consistent button sizes or percentage values for responsive layouts that adapt to container sizes.
Updated on: 2026-03-15T12:57:23+05:30
5K+ Views
Advertisements