Jak utworzyć przycisk HTML, który działa jak link

W HTML komponent przycisku wykonuje określone czynności, takie jak przycisk łącza, który można użyć do nawigacji na drugą stronę zgodnie z potrzebą. Ponadto, przy pomocy CSS, użytkownicy mogą zmienić rozmiar przycisku, kształt, kolor, szerokość, wysokość i wiele innych aspektów. Przycisk może być zaprojektowany z wieloma właściwościami zgodnie z potrzebą.

Ten blog zademonstruje instrukcje tworzenia przycisku HTML, który działa jak link.

Jak utworzyć przycisk HTML, który działa jak link?

Sprawdź poniżej wspomnianą procedurę tworzenia przycisku linku HTML.

Krok 1: Utwórz div

W głównym korpusie HTML utwórz pojemnik Div ​​i określ nazwę klasy jako „Obszar BTN".

Krok 2: Utwórz link dla przycisku

Następnie zdefiniuj „A”Tag i„Href”Element, który wskazuje adres URL docelowy, w którym użytkownik zostanie poruszany po kliknięciu przycisku.

Krok 3: Przypisz klasę przycisków

Teraz utwórz przycisk i określ jego klasę. Na przykład zdefiniuj klasę przycisku jako „Link-Button”I dodaj tekst między„przycisk”Tagi, jak dodaliśmy„Odwiedź Linuxhint".

Po ustawieniu przycisku zamknij „" I "”Tagi.

Oto blok kodu do omawianego scenariusza:

Odwiedź Linuxhint

Teraz idź w kierunku stylizacji przycisku.

Jak stylizować przycisk z CSS, który działa jak link?

Aby stylizować przycisk z CSS, który działa jak link, sprawdź podane instrukcje.

Krok 1: Style Link-Button

Stylizuj przycisk, definiując następujące atrybuty w „Link-Button" klasa:

• • „„kolor tła„Właściwość służy do określenia koloru jako„for".
  • Ustaw wyściółkę jako „10px”, Który jest wykorzystywany do regulacji odstępów komórkowych.
  • Radiusz graniczny jest ustawiony jako „8px„Do zaokrąglenia zakątków zewnętrznej granicy elementu.
  • Shadow Box będzie ustawiony jako „1px, 2px, 1px, 2px”Z kolorem„szary".
  • Ustaw właściwość marginesu jako „5px ” dla odstępów górnych i przycisków i „100px„W przypadku prawego i lewego odstępu.
  • Granica jest ustalona jako „1px solid #CE7777”:

.Link-Button
kolor tła: bisque;
Wyściółka: 10px;
RADIUS Border: 8px;
Box-shadow: 1px 2px 1px 2px Gray;
Margines: 5px 100px;
granica: 1px solid #CE7777;

Krok 2: Ustaw szerokość przycisku

".Obszar BTN„Klasa służy do uzyskania dostępu do kontenera Div, który ustawi szerokość przycisku jako„500px”I nieruchomości marginesowe jako„automatyczny”, Który automatycznie dostosowuje margines wokół obszaru przycisku:

.BTN-Area
szerokość: 500px;
Margines: Auto;

Można zauważyć, że przycisk został pomyślnie zaprojektowany:

Wyjaśniliśmy metodę tworzenia i stylizacji przycisku HTML, który działa jak link.

Wniosek

Aby utworzyć przycisk HTML, który działa jak link, przede wszystkim utwórz kontener Div i określ klasę z nazwą. Następnie zdefiniuj „”Tag wraz z„Href”Atrybut do osadzania linku. Następnie utwórz przycisk i przypisz klasę i nazwę przycisku. Następnie stygnij przycisk łącza, stosując właściwości CSS do zdefiniowanych klas. Ten post wykazał najprostsze podejście do tworzenia przycisku HTML, który działa jak link.