How to Create Pill Buttons With CSS

how-to-create-pill-buttons-with-css

buttons play an important role in creating interactive and user-friendly interfaces.

Buttons can be designed in various shapes, sizes and styles to match the website’s aesthetic.

One of the popular styles for buttons is the “Pill” button, which is a button with rounded corners and a compact shape.

In this tutorial, we will learn how to create Pill buttons using CSS.

CSS Properties for Pill Buttons

The following CSS properties are used to create Pill buttons:

  • Border-radius: This property is used to round the corners of the button and give it a pill shape.
  • Background-color: This property sets the background color of the button.
  • Color: This property sets the text color of the button.
  • Text-align: This property is used to align the text inside the button.
  • Padding: This property sets the space between the text and the button’s border.
  • Box-shadow: This property is used to add a shadow to the button and make it look more elevated.

Creating Pill Buttons with CSS Code

Let’s start by creating a basic pill button using CSS:

button {
border-radius: 50px;
background-color: blue;
color: white;
text-align: center;
padding: 10px 20px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

In the above code, we have used the border-radius property to give the button a pill shape by setting the value to 50px.

The background-color property sets the button’s background color to blue and the color property sets the text color to white.

The text-align property centers the text inside the button and the padding property sets the space between the text and the button’s border to 10px on the top and bottom and 20px on the left and right.

Finally, the box-shadow property adds a shadow to the button to give it a more elevated look.

Customizing Pill Buttons with CSS

We can further customize the Pill button by changing its properties to match our desired design.

For example, we can change the background color and text color based on the button’s state (e.g., hover, active, etc.).

button {
border-radius: 50px;
background-color: blue;
color: white;
text-align: center;
padding: 10px 20px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

button:hover {
background-color: red;
color: white;
}

button:active {
background-color: green;
color: white;
}

In the above code, we have added two new CSS selectors (button:hover and button:active) to change the background color and text color of the button when the user hovers over it or clicks it.

Conclusion

Pill buttons are a popular style for buttons in web design and can be easily created using CSS.

In this short tutorial, we have learned how to create Pill buttons using CSS properties such as border-radius, background-color, color, text-align, padding and box-shadow.

We have also learned how to customize the Pill button by changing its properties based on its state.

Tags

Related Posts