Lecture

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.

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help