temă pentru săptămâna # 6 a Provocare săptămânală de codificare este:

Butoane

“Un buton? ? ” s-ar putea să întrebați … Da! Un buton! ?

“Dar de ce?”

Deoarece un buton este unul dintre elementele de bază ale oricărui site web / aplicație web. Fie că sunteți pe Facebook sau Twitter sau Google, etc., veți găsi întotdeauna un buton care vă permite să interacționați cu aplicația într-un fel. Deci săptămâna aceasta vom construi butoane – o mulțime de butoane!

Dacă doriți să participați la provocare, nu ezitați să construiți orice fel de butoane: Butoane 3D, butoane cu efect de unda, animând butoane, etc – cerul este limita? Be creativ! Știi cât de mult prețuiesc creativitatea! ?

Cum sa creati un set de interfete cu butoane

În acest articol vom construi mai multe butoane și le vom pune pe toate într-un Kit butoane UI:

Înainte de a trece la partea de implementare, să vedem diferitele stări în care poate fi un buton:

  1. Mod implicit stat
  2. Planare state – când mouse-ul este deasupra butonului
  3. Activ state – când se apasă butonul
  4. Concentrați-vă state – când butonul este evidențiat. Permis pentru elementele care acceptă evenimente de la tastatură. Aceasta este utilizată pentru a oferi utilizatorilor care folosesc tastatura doar câteva îndrumări în timp ce traversează aplicația.
  5. Dezactivat stat

Trebuie să stilizăm butoanele pentru a acoperi toate aceste stări.

De asemenea, vom avea trei tipuri diferite de butoane: primary, secondary și tertiary și două dimensiuni suplimentare: large și small.

Codul HTML

<div>
    <h4>Primary</h4>
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-hover">Hover</button>
    <button class="btn btn-primary" disabled>Disabled</button>
    <button class="btn btn-primary btn-large">Large</button>
    <button class="btn btn-primary btn-small">Small</button>

    <h4>Secondary</h4>
    <button class="btn btn-secondary">Default</button>
    <button class="btn btn-secondary btn-hover">Hover</button>
    <button class="btn btn-secondary" disabled>Disabled</button>
    <button class="btn btn-secondary btn-large">Large</button>
    <button class="btn btn-secondary btn-small">Small</button>

    <h4>Tertiary</h4>
    <button class="btn btn-tertiary">Default</button>
    <button class="btn btn-tertiary btn-hover">Hover</button>
    <button class="btn btn-tertiary" disabled>Disabled</button>
    <button class="btn btn-tertiary btn-large">Large</button>
    <button class="btn btn-tertiary btn-small">Small</button>
</div>

Folosim clase pentru a diferenția diferitele tipuri de butoane.

CSS

.btn este clasa principală utilizată de toate butoanele noastre:

.btn {
    border-radius: 2px;
    border: 1px solid;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    padding: 8px 24px;
}

☝️ Unele stiluri generale pentru a face să arate mai bine decât versiunea implicită. ?

Apoi, avem diferitele stări:

.btn-hover,
.btn:hover {
    opacity: 0.9;
}

.btn:disabled {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn:active {
    opacity: 1;
}

.btn:focus {
    outline: 0;
}

Pentru a avea o diferență între state, ne putem juca cu opacity proprietate.

Inițial butonul are opacity: 1 și reducem asta opacity ușor când trecem peste buton și apoi ceva mai mult când butonul este disabled. Când facem clic pe buton, totuși, vom seta opacitatea înapoi la 1, deoarece dă un efect frumos.

Pentru focus starea, eliminăm valoarea implicită outline proprietate și vom adăuga un box-shadow în schimb, dar vom face acest lucru separat pentru fiecare tip de buton, deoarece culoarea se schimbă în funcție de clasă (vezi mai jos).

Culorile individuale sunt setate la .btn-primary, .btn-secondary și .btn-tertiary clase:

.btn-primary {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.btn-primary:disabled {
    color: var(--primary-color);
}

.btn-primary:focus {
    box-shadow: 0 0 5px var(--primary-color);
}

.btn-secondary {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}

.btn-secondary:disabled {
    color: var(--secondary-color);
}

.btn-secondary:focus {
    box-shadow: 0 0 5px var(--secondary-color);
}

.btn-tertiary {
    border-color: var(--tertiary-color);
    background-color: var(--tertiary-color);
}

.btn-tertiary:disabled {
    color: var(--tertiary-color);
}

.btn-tertiary:focus {
    box-shadow: 0 0 5px var(--tertiary-color);
}

După cum puteți vedea, folosim Variabile CSS metoda de a seta aceeași culoare pe proprietăți diferite. Dar pentru ca acest lucru să funcționeze, trebuie să declarăm variabilele de culoare :root după cum urmează:

:root {
    --primary-color: #3457dc;
    --secondary-color: #ea4d67;
    --tertiary-color: #ea674d;
}

Rețineți că este o bună practică să adăugați :root declarație în partea de sus a fișierului CSS.

În cele din urmă, să adăugăm cele două dimensiuni suplimentare; .btn-large și .btn-small clase:

.btn-large {
    font-size: 16px;
    padding: 12px 36px;
}

.btn-small {
    font-size: 12px;
    padding: 4px 12px;
}

Concluzie

Vedeți cât de ușor este să creați un Kit butoane UI? ?

Ca caracteristici bonus puteți adăuga un ripple effect la butoanele prin JavaScript. Am făcut acest lucru într-un articol anterior – îl puteți verifica dând clic pe aici!

Sper că v-a plăcut această provocare și abia aștept să văd ce veți crea!

Codificare fericită! ?

Publicat inițial la www.florin-pop.com.