How to style a button in CSS?

To style a button in CSS is quite easy and straight forward, we will use the steps listed below to learn how to style buttons:

First, we need to create the Html structure of the button

1. Arrange Up The HTML Structure

Create a button element in your HTML document.

Html code
<button class="btn">Click me</button> 

2. Add CSS styles

Apply CSS styles to customize the appearance of the button.

CSS 

.btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px; /* Add hover and focus styles */
  cursor: pointer;
} 
/* Hover style */
.btn:hover {
  background-color: #0056b3;
} 
/* Focus style */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

Result

In this example, the .btn selector is used to target the button in CSS and that enable us to set the background color (background-color) and text color (color) for the button.

The padding (padding) and border (border) properties are adjusted to create spacing and remove the default button border.

The border-radius property is set to 4px to round the button’s corners.

The: hover pseudo-class is used to specify the button’s appearance when the user hovers over it.

The: focus pseudo-class is used to specify the appearance when the button is in focus (such as when clicked or selected using the keyboard).

In this case, the button’s background color and outline are modified.

3. Customize the styles to suit your need

You can modify the CSS styles to fit your desired design. You can adjust the font size, add box-shadow, apply gradients, or incorporate other properties to customize the button’s appearance.

By following these steps, you can style a button using CSS. Remember to adjust the class name (.btn) according to your specific button element’s class or ID, and customize the styles to match your design requirements.