Primary and Secondary Button Styles
Let's define styles that are commonly applied to buttons.
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 tobackground: #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
, whereRR
,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
.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