Skip to main content
Practice

Common Button Style

In this lesson, we will define the .btn class that applies a common style to buttons.

Common Button Style
.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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.