Rozdział 2 · Zadanie 9

Przyciski

Tag button i to samo stylowanie, które już znasz.

Zadanie

Dodaj do style.css:

style.css

.btn {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
}

A w styles-demo.html

Dodaj:

styles-demo.html

<button class="btn">Kliknij mnie</button>

Jak to czytać

border: none; — usuwa domyślną szarą ramkę przycisku przeglądarki.

padding: 12px 24px; — dwie liczby po spacji: «góra-dół 12px, lewo-prawo 24px».

Zwróć uwagę

Przycisk na razie nic nie robi po kliknięciu — o tym porozmawiamy w Rozdziale 3 (JavaScript). Teraz uczymy się tylko go stylizować.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska