Tworzenie przycisków w HTML jest jedną z podstawowych umiejętności, które warto opanować na początku swojej przygody z tworzeniem stron internetowych. Przycisk to element interaktywny, który może wywoływać różne akcje, takie jak przesyłanie formularza, otwieranie nowej strony lub wykonywanie określonego skryptu. W tym artykule krok po kroku wyjaśnimy, jak zrobić przycisk w HTML, a także omówimy różne sposoby jego stylizacji i funkcjonalności.
Tworzenie podstawowego przycisku w HTML
Aby utworzyć przycisk w HTML, używamy tagu <button>. Oto przykład prostego przycisku:
<button>Kliknij mnie</button>
Ten kod generuje przycisk z tekstem „Kliknij mnie”. Przycisk ten może być wykorzystany w różnych kontekstach, na przykład w formularzach lub do wywoływania akcji w JavaScript.
Przycisk z użyciem atrybutu „type”
W HTML możemy określić rodzaj przycisku, dodając atrybut type. Oto najczęściej używane wartości atrybutu type:
-
submit – wysyła dane formularza.
-
reset – resetuje formularz do wartości domyślnych.
-
button – zwykły przycisk, który nie ma domyślnej akcji (często używany do wywoływania skryptów JavaScript).
Przykład przycisku z atrybutem type:
<button type=”submit”>Wyślij</button>
Tworzenie przycisku za pomocą linka
Często zamiast tradycyjnego przycisku, potrzebujemy elementu wyglądającego jak przycisk, ale działającego jak link. W takim przypadku można wykorzystać znacznik <a> z odpowiednim stylowaniem w CSS:
<a href=”https://twojastrona.pl” class=”button”>Kliknij tutaj</a>
Aby przycisk wyglądał estetycznie, warto dodać odpowiedni styl w CSS:
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
Dodanie stylizacji do przycisku
Standardowy przycisk HTML może wyglądać zbyt prosto, dlatego warto dodać trochę stylu za pomocą CSS. Oto przykład stylizacji przycisku:
button {
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
Dzięki tym stylom przycisk będzie miał ładny wygląd, a po najechaniu na niego kursorem myszki zmieni się w rękę (dzięki cursor: pointer).
Przycisk z ikoną
Chcesz dodać ikonę do przycisku? Możesz to zrobić, używając tagu <i> lub <span> i ikon z bibliotek takich jak Font Awesome. Oto przykład przycisku z ikoną:
<button>
<i class=”fa fa-thumbs-up”></i> Lubię to
</button>
Aby to zadziałało, musisz dołączyć bibliotekę Font Awesome:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”>
Przycisk z akcją JavaScript
Przycisk HTML może również wywoływać skrypty JavaScript. Aby to zrobić, wystarczy dodać atrybut onclick do znacznika <button>:
<button onclick=”alert(’Kliknięto przycisk!’)”>Kliknij mnie</button>
Po kliknięciu tego przycisku na ekranie pojawi się okienko z komunikatem.
Podsumowanie
Wiesz już, jak zrobić przycisk w HTML i jak nadać mu różne funkcje oraz wygląd. Przycisk może być prostym elementem w formularzu, linkiem stylizowanym na przycisk lub interaktywnym elementem wywołującym skrypty JavaScript. Wszystko zależy od tego, czego potrzebujesz na swojej stronie internetowej.
