Skip to main content
Practice

Primary and Secondary Button Styles

Let's define styles that are commonly applied to buttons.


Primary Button Style​

Primary Button Style
.btn-primary {
  background: var(--primary-color);
  color: #000000;
}

  • background: var(--primary-color);: This sets the background color of the element. We have used a variable named --primary-color. The --primary-color variable has already been set to the value #ffcd42. Thus, background: var(--primary-color); is equivalent to background: #ffcd42;. By using variables, the reasoning behind color choices remains clear when revisited later.

  • color: #000000;: This sets the text color. #000000 represents black. It is expressed in the format #RRGGBB, where RR, GG, BB stand for red, green, and blue, respectively. Lower values result in darker colors, while higher values result in brighter colors. For example, #FF0000 represents red, #00FF00 represents green, and #000000 is black since red, green, and blue are all set to 0.


Secondary Button Style​

Secondary Button Style
.btn-secondary {
  margin: 5px 0;
  background-color: var(--bg-secondary);
  color: var(--bg-primary);
}

  • margin: 5px 0;: This sets the top and bottom margins to 5px and the left and right margins to 0.

  • background-color: var(--bg-secondary);: This sets the background color of the element using the value from the --bg-secondary variable, which is already defined as #ffd35c.

  • color: var(--bg-primary);: This sets the text color using the value from the --bg-primary variable, which is already defined as #ffffff.

Want to learn more?

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