Change the padding of a button with CSS


Button padding, as used in web development, describes the gap that exists between a button's text or icon and its edges. With CSS (Cascading Style Sheets), you can change a button's padding.

The CSS padding property is used to add space to an element's border and surrounding area. Padding is essential since it is the innermost portion of the CSS box model that affects the element's spacing. The CSS box model contains the element's margin and border styles in addition to padding.

The CSS padding is important to achieving the ideal balance between design aesthetics and functionality, which is essential to create a user-friendly website, as one cannot exist without the other. This is where the role of CSS padding is applicable.

Padding A Button With CSS

When adding a call to action to a button element on the website, you should always pad them effectively so that they stand out enough for a user to click. You can add padding to a button in a same way that you would a text element.

Syntax

Following is the syntax for HTML button

<button>...</button&>

Example

Let's look at the following example, where we are going to change the padding of the button.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #D5F5E3;
         text-align: center;
      }
      .tp {
         background-color: #DE3163;
         border: none;
         color: #17202A;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 20px;
         margin: 15px 20px;
         cursor: pointer;
      }
      .x1 {
         padding: 3px 10px;
      }
      .x2 {
         padding: 10px 15px;
      }
   </style>
</head>
<body>
   <button class="tp x1">Button 1</button>
   <button class="tp x2">Button 2</button>
</body>
</html>

When we run the above code,it will generate an output consisting of the two buttons with different paddings displayed on the webpage.

Example

Considering another scenario, where we are going to see the difference between padded button and normal button.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #E8DAEF;
         text-align: center;
         font-family: verdana;
         color: #DE3163;
      }
      .tp {
         background-color: #F9E79F;
         border: none;
         color: #17202A;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 20px;
         margin: 15px 20px;
         cursor: pointer;
      }
      .x2 {
         padding: 10px 15px;
      }
   </style>
</head>
<body>
   <button>Button 1</button> : Normal Button <br>
   <br>
   <button class="tp x2">Button 2</button> : Padded Button <br>
</body>
</html>

On running the above code, the output window will pop up, displaying the two buttons: one is a normal button and the other is padded on the webpage.

Updated on: 08-Jan-2024

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements