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
How to style block buttons (full-width) with CSS?
Block buttons, also known as full-width buttons, span the entire width of their container. They are created using CSS by setting the button's width to 100% and applying proper styling for better visual appeal and user experience.
Syntax
button {
width: 100%;
display: block;
}
Example: Basic Block Button
The following example creates a simple full-width button −
<!DOCTYPE html>
<html>
<head>
<style>
.blockBtn {
display: block;
width: 100%;
border: none;
background-color: rgb(19, 0, 105);
color: white;
padding: 14px 28px;
font-size: 18px;
cursor: pointer;
text-align: center;
font-weight: bold;
}
.blockBtn:hover {
background-color: rgb(132, 161, 255);
color: black;
}
</style>
</head>
<body>
<h2>Block Button Example</h2>
<button class="blockBtn">Click Me - I'm Full Width!</button>
</body>
</html>
A dark blue button spans the full width of the container with white text "Click Me - I'm Full Width!". On hover, the button changes to light blue with black text.
Example: Block Button in a Product Card
This example demonstrates a full-width button inside a product card −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.productCard {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
background-color: #f9f9f9;
border-radius: 8px;
overflow: hidden;
}
.productCard img {
width: 100%;
height: 200px;
object-fit: cover;
}
.productCard h3 {
margin: 10px;
color: #333;
}
.productCard p {
margin: 5px 15px;
color: #666;
}
.buyBtn {
width: 100%;
border: none;
padding: 15px;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.buyBtn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="productCard">
<img src="/images/sample-product.jpg" alt="Product Image">
<h3>Premium Headphones</h3>
<p>High-quality sound experience</p>
<p><strong>Price: $79.99</strong></p>
<button class="buyBtn">Add to Cart</button>
</div>
</body>
</html>
A product card with an image, title "Premium Headphones", description, price, and a full-width blue "Add to Cart" button at the bottom. The button spans the entire width of the card and changes to darker blue on hover.
Key CSS Properties
| Property | Purpose |
|---|---|
width: 100% |
Makes button span full container width |
display: block |
Ensures button takes full line |
text-align: center |
Centers button text |
padding |
Adds spacing inside button |
cursor: pointer |
Shows clickable cursor on hover |
Conclusion
Block buttons are essential for creating prominent call-to-action elements. Use width: 100% and display: block to achieve full-width buttons, and enhance them with proper padding, colors, and hover effects for better user interaction.
Updated on: 2026-03-15T14:33:36+05:30
2K+ Views
Advertisements