HTML

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 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 .

      button < background-color: blue; color: white; padding: 10px; >.full  
Default Button
 Submit 
Full-width Button
 Submit  

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 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 element as well as element.

Источник

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

.button1
.button2
.button3
.button4
.button5

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Animated Buttons

Example

Example

Add a «pressed» effect on click:

Example

Example

Add a «ripple» effect on click:

Источник

How TO — Full Width (Block) Buttons

Learn how to style block buttons (full-width) with CSS.

How To Style Block Buttons

Step 1) Add HTML:

Example

Step 2) Add CSS:

To create a full-width button, add a width of 100% and make it into a block element:

Example

.block <
display: block;
width: 100%;
border: none;
background-color: #04AA6D;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
>

Go to our CSS Buttons Tutorial to learn more about how to style buttons.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник