W dokumentach HTML użytkownik może korzystać z różnych elementów, takich jak tabele, formularze, pola tekstowe, obrazy i przyciski. Przyciski na stronach internetowych są używane do wykonywania dowolnej akcji lub do wygenerowania dowolnego zdarzenia na przycisku kliknięcia. Można go również wykorzystać do montażu na dowolną inną stronę internetową. Deweloperzy osadzają przyciski na stronach internetowych w różnych stylach i kształtach.

Ten samouczek pokaże:

• Jak zrobić/utworzyć przycisk w HTML?
• Jak tworzyć/utworzyć przycisk Circle za pomocą właściwości CSS?

Jak zrobić/utworzyć przycisk w HTML?

Jeśli użytkownik chce zrobić przycisk w HTML, wypróbuj dane instrukcje.

Krok 1: Utwórz kontener Div

Najpierw użyj „„Element do utworzenia pojemnika„ Div ”. Dodaj także „ID”Atrybut o określonej wartości zgodnie z Twoimi preferencjami.

Krok 2: Wstaw nagłówek

Następnie wstaw nagłówek poziomu pierwszego za pomocą „

" element. Następnie osadziłem tekst nagłówka między „

”Tagi.

Krok 3: Utwórz przycisk

Utwórz przycisk w HTML, wykorzystując „”Tag wraz z„typ”Atrybut jako„składać”:

Przycisk CSS Circle

Składać

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

Teraz przejdź do następnej sekcji, aby uzyskać okrągłe przycisk.

Jak tworzyć/utworzyć przycisk Circle za pomocą właściwości CSS?

„„Radiusz graniczny„Własność jest wykorzystywana do tworzenia przycisku w postaci okręgu. Ta właściwość ustawia róg elementu z każdej strony.

Aby to zrobić, spójrz na podaną procedurę krok po kroku.

Krok 1: Style „Div” pojemnik

Najpierw uzyskaj dostęp do „div”Kontener za pomocą nazwy klasy„#Circle-Btn”I zastosuj następujące właściwości CSS do stylizacji:

#circle-btn
Wysokość: 200px;
szerokość: 200px;
Margines: 50px;
Wyściółka: 80px;
granica: 3px Solid RGB (23, 8, 228);
kolor tła: Blanchedalmond;

Tutaj:

• „„wysokość„Właściwość jest wykorzystywana do określenia wysokości elementu.
• "szerokość”Definiuje rozmiar elementu poziomo.
• "margines”Służy do przydzielania przestrzeni poza zdefiniowaną granicą.
• "wyściółka”Określa przestrzeń wewnątrz granicy.
• "granica„Przydziela granicę wokół elementu.
• "kolor tła„Właściwość jest używana do określenia koloru na tylnej części elementu.

Wyjście

Krok 2: Zrób przycisk Circle

Teraz uzyskaj dostęp do przycisku według nazwy znacznika i zastosuj podane właściwości na przycisk, aby był okrągły:

przycisk
Blok wyświetlacza;
Wysokość: 150px;
szerokość: 150px;
Radiusz graniczny: 50%;
granica: 1px stały czerwony;

Opis powyższego kodu jest następujący:

• „„wyświetlacz„Właściwość CSS służy do określenia zachowania wyświetlania elementu, na przykład to, czy element jest blokiem, czy inline.
• "Radiusz graniczny„Własność jest wykorzystywana do ustawiania krawędzi elementów okrągłego ze wszystkich stron. W naszym scenariuszu wartość tej właściwości jest ustalana jako „50%„Aby przycisnąć przycisk ze wszystkich stron.

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

Krok 3: Zastosuj efekt „zawieszki” na przycisk

Aplikować "unosić się„Pseudo klasa, aby dodać efekt najemnika na przycisk:

Przycisk: Hover
Kolor: RGB (247, 274, 248);
kolor tła: kadetblue;

Na "Przycisk: Wather”, Właściwość CSS„kolor tła”Jest wykorzystywany do ustawiania koloru tła i„kolor”Służy do określenia koloru tekstu.

Wyjście

Nauczyłeś się metody tworzenia przycisku koła w CSS.

Wniosek

Aby utworzyć przycisk Circle w CSS, najpierw utwórz prosty przycisk, wykorzystując „”Tag w HTML. Następnie zastosuj „Radiusz graniczny„Właściwość, która okrągła krawędzie elementu ze wszystkich stron. Wartość „promieniowania granicznego” jest określona jako „50%„Aby zrobić okrągły przycisk. Ten post wyjaśnił procedurę tworzenia przycisku koła w CSS.