Кнопки

Link     Button

<a class="button" href="">Link</a>
<button class="button" type="button">Button</button>

<button class="button" type="button">.button</button>
<button class="button button-secondary" type="button">.button-secondary</button>
<button class="button" type="button" disabled>disabled</button>
<button class="button button-outline1" type="button">.button-outline1</button>
<button class="button button-outline2" type="button">.button-outline2</button>

<button class="button button-red" type="button">.button-red</button>
<button class="button button-brown" type="button">.button-brown</button>
<button class="button button-orange" type="button">.button-orange</button>
<button class="button button-yellow" type="button">.button-yellow</button>
<button class="button button-lime" type="button">.button-lime</button>
<button class="button button-green" type="button">.button-green</button>
<button class="button button-teal" type="button">.button-teal</button>
<button class="button button-cyan" type="button">.button-cyan</button>
<button class="button button-blue" type="button">.button-blue</button>
<button class="button button-indigo" type="button">.button-indigo</button>
<button class="button button-violet" type="button">.button-violet</button>
<button class="button button-purple" type="button">.button-purple</button>
<button class="button button-pink" type="button">.button-pink</button>
<button class="button button-gray" type="button">.button-gray</button>

<button class="button" style="
--button-bg-color: var(--red600); 
--button-text-color: var(--red100);
--button-radius: 10px; 
--button-border: 3px solid var(--red200);

--button-hover-bg-color: var(--red700); 
--button-hover-text-color: var(--yellow500);

--button-focus-bg-color: var(--red400); 
--button-focus-text-color: var(--white);
--button-focus-border: 3px solid var(--red600); 
--button-focus-shadow: 0 0 0 2px var(--red200);
">Download</button>