Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style block buttons (full-width) with CSS?
To set full-width buttons on a web page, set the button with width 100%. Further style the buttons using the text-align property to center the text on the button. Place the text properly in the button using the padding property. The padding area is set on all the four sides of an element at once using the padding property. Let us see how to style block button i.e., full-width with CSS.
Set the button
Use the <button> element and set a button on the web page −
<button class="blockBtn">Block Button</button>
The button width
Style the button and set the button width using the width property with the value 100%. The cursor property is set to the value pointer to make the button looks clickable. Since the button expands to full-width, the text should be placed in the center using the text-align property with the value center. The display property is set the block value −
.blockBtn {
display: block;
width: 100%;
border: none;
background-color: rgb(19, 0, 105);
color: white;
padding: 14px 28px;
font-size: 36px;
cursor: pointer;
text-align: center;
font-weight: bold;
}
Button hover
When the button is hovered with the mouse cursor, the background and text color will change. The :hover selector is used to achieve this −
.blockBtn:hover {
background-color: rgb(132, 161, 255);
color: black;
}
Full-width button on a web page
The following is the code to create block buttons with CSS −
Example
<!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: 36px;
cursor: pointer;
text-align: center;
font-weight: bold;
}
.blockBtn:hover {
background-color: rgb(132, 161, 255);
color: black;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Block Button Example</h1>
<button class="blockBtn">Block Button</button>
</body>
</html>
Full-width Button on a card
Here a product card is created and a button is set on it. The button covers the entire card since the width is set to 100% −
button {
width: 100%;
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(23, 31, 102);
text-align: center;
cursor: pointer;
font-size: 18px;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.productCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: rgb(190, 224, 224);
}
.productDetails {
color: rgb(26, 0, 51);
font-weight: bold;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(23, 31, 102);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">Product Card Example</h2>
<div class="productCard">
<img src="https://images.pexels.com/photos/1152077/pexels-photo-1152077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="width:100%"/>
<h1>Leather Bag</h1>
<p class="productDetails">Exotic Quality</p>
<p>Price 50$</p>
<p><button>Buy Now</button></p>
</div>
</body>
</html>
740 Views
