W tworzeniu stron internetowych przyciski są kluczowymi komponentami, które umożliwiają interakcję użytkownika ze stroną internetową. Przyciski mogą zwiększyć doświadczenie programistów i zwiększyć dochód w firmie. Ponadto przyciski pomagają programistom poruszać się po produkcie, ponieważ wymagają oni użytkowników przekonwertowania pożądanych wyników.

W tym artykule zademonstrujemy:

• Jak utworzyć/tworzyć przycisk w HTML?
• Jak stylizować przycisk kliknięte w CSS?

Jak utworzyć/tworzyć przycisk w HTML?

Aby utworzyć/zrobić przycisk w HTM, HTML ”„Element jest wykorzystywany. Aby uzyskać praktyczną demonstrację, musisz sprawdzić podane instrukcje.

Krok 1: Zrób pojemnik „Div”

Początkowo zrób „div”Pojemnik poprzez wkładanie„" element. Następnie przypisz atrybut klasy i przydzielić nazwę do dalszego użycia.

Krok 2: Włóż nagłówek

Następnie użyj znacznika nagłówka HTML, aby wstawić nagłówek. Użytkownicy mogą używać dowolnego znacznika nagłówka z „

" do "

”Tag. W tym scenariuszu „

Krok 3: Utwórz przycisk

Następnie utwórz element przycisku za pomocą „" element. Następnie określ przycisk „typ" Jak "składać”I osadzaj trochę tekstu między znacznikiem przycisku, aby wyświetlić przycisk:

Przycisk kliknięty styl

Kliknij przycisk

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

Przejdź do następnej sekcji, aby dowiedzieć się o stylu klikniętego przycisku.

Jak stylizować kliknięty przycisk w CSS?

Istnieją różne pseudoklasy, w tym „:unosić się" I ":centrum”Wykorzystane z elementami przycisków. Ponadto użytkownik może również zastosować różne właściwości CSS na przycisku do stylizacji.

Aby stylizować kliknięty przycisk w CSS, wypróbuj następującą procedurę.

Krok 1: Style „Div” pojemnik

Uzyskać dostęp do "div”Kontener za pomocą selektora atrybutu i atrybutu. Aby to zrobić, „.BTN-CONTAINER”Jest używany do tego celu:

.BTN-CONTAINER
Margines: 60px;
Wyściółka: 20px 40px;
granica: 3px kropkowane RGB (47, 7, 224);
Wysokość: 150px;
szerokość: 200px;
Wyrównanie: Center;

Według danego fragmentu kodu:

• "margines„Właściwość pomaga dodać pustą przestrzeń wokół granicy elementu.
• "wyściółka”Służy do określenia przestrzeni wewnątrz elementu.
• "wysokość" I "szerokość”Właściwości przydzielają rozmiar zdefiniowanego elementu.
• "Wyrównanie”Jest wykorzystywany do ustawienia wyrównania elementu wewnątrz elementu.

Wyjście

Krok 2: Element przycisku stylu

Uzyskaj dostęp do elementu przycisku za pomocą „przycisk”I zastosuj poniżej podawane właściwości w fragmencie kodu:

przycisk
Filtr: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
Wysokość: 50px;
szerokość: 100px;
kolor tła: żółty;

Tutaj:

• "filtr„Właściwość służy do zastosowania efektu wizualnego na zdefiniowany element. Aby to zrobić, wartość tej właściwości jest ustalana jako „Drop-Shadow”, Który jest wykorzystywany do określenia cienia w elemencie.
• "kolor tła”Jest wykorzystywany do przydzielenia koloru z tyłu elementu. Na przykład wartość tego jest określona jako „żółty".

Wyjście

Krok 3: Styl z selektorem „: Hover”

Teraz uzyskaj dostęp do elementu przycisku wzdłuż pseudo selektora, który służy do wyboru elementów, gdy mysz użytkownika nad nimi:

Przycisk: Hover
kolor tła: RGB (238, 7, 7);

Aby to zrobić, „kolor tła„Właściwość jest używana z wartością”RGB (238, 7, 7)". Ten kolor wyświetli się tylko wtedy, gdy użytkownik unosi się nad przyciskiem.

Wyjście

Krok 4: Styl z selektorem „: Focus”

Teraz skorzystaj z „:centrum„Pseudo selektor wzdłuż elementu przycisku, który służy do stosowania stylu na wybranym elemencie, gdy użytkownik jest ukierunkowany przez klawiaturę lub skupiony przez myszą:

przycisk: Focus
kolor tła: niebieski;

W tym scenariuszu „kolor tła”Jest używany z wartościami ustalonymi jako„niebieski".

Nauczyłeś się metody stylizacji klikniętego przycisku w CSS.

Wniosek

Aby stylizować kliknięty przycisk w CSS, najpierw utwórz przycisk w HTML za pomocą „" element. Następnie uzyskaj dostęp do pseudo -selektorów przycisków, takich jak „: najemnik ”i„: Focus”I zastosuj nieruchomości CSS, w tym„Wysokość ”,„ szerokość ”,„ filtr ”,„ kolor tła", i wiele więcej. Ten post dotyczył stylizacji klikniętego przycisku w CSS.