PUBLISHED ON: AUGUST 21, 2021
How to style block buttons (full-width) with CSS?
The buttons are very common on the webpage. The buttons usually take up small space on the webpage. But sometimes we need to create a full-width button. There is no HTML attribute that will directly add a full-width button. We can create a full-width button with CSS.
In this tutorial, we will learn to create a full-width button with CSS.
Creating a full-width button
Creating a full-width button is very simple and easy, just take an <button> element and make it a block element with display: block property and add width: 100% to it. You can use other CSS properties to customize it.
Example: Creating a full-width button with CSS
Here, we have shown you both full- width button and default button. For full- width button, we have used width:100% and display: block.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button {
background-color: blue;
color: white;
padding: 10px;
}
.full {
display: block;
width: 100%;
}
</style>
</head>
<body>
<h2> Default Button</h2>
<button class="default">Submit </button>
<h2> Full-width Button</h2>
<button class="full"> Submit </button>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a full-width button with CSS
As we know that we can also create a button with <input> element with type="submit". The same CSS properties and be used with it too for creating a full-width button. Here is an example to show it.
Conclusion
In this tutorial, we have learned to create a block full-width button with CSS. To do so use display: block and width: 100% . This property can be used with <button> element as well as <input> element.
