How to style block buttons (full-width) using CSS ? Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will explore how to style block buttons with full width using CSS. Making buttons stand out on a website is crucial. Such types of buttons provide responsiveness to the web page that works well on various devices. Styling buttons with clear words, appealing colors, and effects, can easily capture the user's attention.Table of ContentFull-width button on a web pageFull-width Button on CardFull-width button on a web pageHere, we will see how to design a webpage with a button and make that button to 100% width of the webpage by using the display and width property.ApproachFirst, make the basic structure of the web page with different HTML elements including <h1>, and <button>.Style heading with green color. and set the property text-align to the center for center the text.For the button set the property display to block and set with to 100% for making full-width button.Now use CSS to give border-radius for better design and visual appeal.Example: In this example, we will see how to style block buttons (full-width) using CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Full Width Button</title> <style> h1 { text-align: center; color: green; } .mybtn { display: block; background-color: green; color: beige; width: 100%; height: 50px; font-size: 30px; border-radius: 40px; border: none; } .mybtn:hover { background-color: rgb(148, 207, 148); color: rgb(82, 82, 74); } </style> </head> <body> <h1>GeeksforGeeks</h1> <button class="mybtn"> Full Width Button </button> </body> </html> Output Full width Button on CardIn this we will see how to design a card on a webpage with a button and make that button to 100% width with respect to card by using display and width property.ApproachFirst make basic structure of the card using different html elements including <div>, <h1>, <img>, <p>, and <button>.The class named ".box" class have the property flexbox to center its content both vertically and horizontally for making it responsive.The element name "divbox" contains the property transform scale on hoving over it for giving smooth transition effect.The button have the property display block and width 100% for making block button (full-width) button.Example: In this example, we will see how to style full-width button within card. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Full Width Button</title> <style> h1 { text-align: center; color: green; } .mybtn { display: block; background-color: rgb(22, 39, 63); color: beige; width: 100%; height: 50px; font-size: 30px; border: none; } .mybtn:hover { background-color: rgb(57, 103, 167); color: rgb(239, 239, 231); } img { width: 300px; } .divbox { width: 300px; border: 2px solid black; border-radius: 15px; overflow: hidden; transition: transform 0.2s ease-in-out; box-shadow: rgba(0, 0, 0, 0.45) 0px 15px 25px; } p { text-align: justify; padding: 5px; } .box { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .divbox:hover { transform: scale(1.1); } </style> </head> <body> <div class="box"> <h1>GeeksforGeeks</h1> <div class="divbox"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240108014734/h11.webp" alt="gfgimg"> <p> Everyone has incorporated ChatGPT to do their work more efficiently and those who failed to do so have lost their jobs. The age of AI has started and people not adapting to AI could introduce some difficulties for them. </p> <button class="mybtn"> Click Me </button> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to style block buttons (full-width) using CSS ? S shivanigupta18rk Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Style Alert Buttons using CSS? Styling alert buttons with CSS enhances user experience by making buttons more visually appealing and interactive. We can customize their look using CSS properties like color, padding, and hover effects. In this tutorial, we will focus on how to style "alert" buttons using CSS. These are the followi 5 min read How to Create a Full-Width Table using CSS? Creating a full-width table using CSS involves setting the table's width to 100% and adjusting other relevant properties to ensure that it stretches across the entire width of its parent container. In this article, we will explain the approach to creating a full-width table using CSS. ApproachCreate 2 min read How to Style Text Buttons using CSS? Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons usi 2 min read How to Style Round Buttons using CSS? Round buttons are circular buttons used on websites. They usually have icons or text for actions. To style round buttons using CSS, set their width and height equal, use border-radius: 50% for a circular shape, and add colors and hover effects.Add Style To Round Buttons Using CSSMake a basic structu 2 min read How to style outline buttons using CSS ? This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different 3 min read Blaze UI Full Width Buttons Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to c 2 min read How to create Text Buttons using CSS ? In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H 2 min read How to create and style border using CSS ? The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val 4 min read How to Style an hr Element with CSS? The <hr> element in HTML is used to create a horizontal line or thematic break between sections of a webpage. By default, it shows as a solid, thin line that spans the width of its container. You can easily customize the appearance of the <hr> element using CSS to match your website's de 4 min read Like