Skip to main content
Practice

primary, secondary button styles

This time, we will define styles commonly applied to buttons.


primary button style​

primary button style
.btn-primary {
  background: var(--primary-color);
  color: #000000;
}

  • background: var(--primary-color);: Sets the background color of the element. We use a variable named --primary-color. The --primary-color variable has already been assigned a value of #ffcd42 earlier. Therefore, background: var(--primary-color); means the same as background: #ffcd42;. By using variables, it becomes easier to understand why a particular color was chosen when viewed later.

  • color: #000000;: Sets the text color. #000000 represents black. #000000 uses the #RRGGBB format to express colors, where RR, GG, and BB represent red, green, and blue, respectively. The lower the values, the darker the color, and the higher the values, the brighter the color. For instance, #FF0000 denotes red, #00FF00 denotes green, and #000000 signifies black since all values for red, green, and blue are 0.


secondary button style​

secondary button style
.btn-secondary {
  margin: 5px 0;
  background-color: var(--bg-secondary);
  color: var(--bg-primary);
}

  • margin: 5px 0;: Sets a margin of 5px on the top and bottom, and 0 on the left and right.

  • background-color: var(--bg-secondary);: Sets the background color of the element. The --bg-secondary variable is used here, which has already been assigned the value #ffd35c.

  • color: var(--bg-primary);: Sets the text color. The --bg-primary variable is used here, which has already been assigned the value #ffffff.

Want to learn more?

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