Common Button Style

In this lesson, we will define the .btn class that applies a common style 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;: Arranges the element horizontally, while also allowing block-level properties (such as width, height) to be set.

• padding: 12px 32px;: Sets the inner top and bottom margin of the element to 12px and the left and right margin to 32px.

• border-radius: 30px;: Rounds the corners of the element, with the roundness set to 30px.

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

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

• transition: 0.3s;: Makes the element's property changes occur over 0.3 seconds, making the changes appear smooth. This can apply to changes in size, color, position, etc.