Common Button Styles

In this lesson, we will define a common .btn class to be applied to buttons.

Copy
.btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: 14px;
  transition: 0.3s;
}

• display: inline-block;: This places the element inline with others, while still allowing block-level element properties (like width and height) to be applied.

• padding: 12px 32px;: Sets the element's vertical padding to 12px and horizontal padding to 32px.

• border-radius: 30px;: Rounds the corners of the element to a radius of 30px.

• text-transform: uppercase;: Converts the text content to uppercase. For example, 'hello' becomes 'HELLO'.

• font-size: 14px;: Sets the size of the font to 14px.

• transition: 0.3s;: Ensures that any changes to the element's properties occur over 0.3 seconds, creating smooth transitions for transformations like size, color, or position changes.