Primary and Secondary Button Styles

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

Copy
.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.

Copy
.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.