Jak ustawić rozmiar przycisku

„„„Element pomaga użytkownikom generować zdarzenia lub podjąć jakiekolwiek działania. Przyciski można również wykorzystać do przesłania formularza i uzyskania informacji. Użytkownicy mogą dodać dowolny typ przycisku na stronie internetowej, w tym okrągłe przyciski, kwadraty, prostokąty i wiele innych. Ponadto użytkownicy mogą również ustawić rozmiar przycisku, wykorzystując CSS „wysokość" I "szerokość”Właściwości zgodnie z ich wyborem.

Ten zapis będzie określony:

• Jak zrobić/utworzyć przycisk w HTML?
• Jak ustawić rozmiar przycisku w HTML za pomocą właściwości CSS?

Jak zrobić/utworzyć przycisk w HTML?

Aby przede wszystkim zrobić przycisk, zrób „div”Pojemnik przy użyciu„”Tag i wkładanie„ID”Atrybut o określonej wartości. Następnie dodaj „„Element i osadzaj tekst do wyświetlenia na nim:

Składać

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

Jak ustawić rozmiar przycisku w HTML za pomocą właściwości CSS?

Aby ustawić rozmiar przycisku, postępuj zgodnie z wymienioną procedurą.

Krok 1: Style „Div” pojemnik

Po pierwsze, uzyskaj dostęp do „ID”Atrybut z pomocą„#„Selektor i nazwa identyfikatora”BTN-size". Następnie zastosuj poniżej listy nieruchomości do stylizacji:

#BTN-size
Margines: 50px 150px;
Wysokość: 100px;
szerokość: 100px;
Wyściółka: 40px;
granica: 3px Solid RGB (23, 8, 228);
kolor tła: RGB (245, 191, 111);

Tutaj:

• „„margines„Własność jest wykorzystywana do przydzielania przestrzeni poza granicą elementu.
• "wysokość”Określa wielkość wysokości elementu.
• "szerokość”Ustawia rozmiar szerokości elementu.
• "wyściółka„Przydziela przestrzeń wewnątrz granicy elementu.
• "granica”Służy do zdefiniowania granicy wokół elementu.
• "kolor tła”Jest wykorzystywany do ustawiania koloru tła na zdefiniowany element.

Wyjście

Krok 2: Ustaw rozmiar przycisku

Teraz uzyskaj dostęp do „”Element za pomocą nazwy znacznika i zastosuj następujące właściwości, aby ustawić rozmiar przycisku:

przycisk
kolor tła: RGB (127, 235, 145);
Kolor: RGB (184, 130, 238);
szerokość: 100px;
Wysokość: 80px;
Radiusz graniczny: 30%;

W powyższym kodzie:

• „„kolor tła”Służy do ustawienia koloru tła przycisku.
• "kolor”Określa kolor tekstu.
• "szerokość”Służy do ustawienia szerokości przycisku. Na przykład określiliśmy wartość szerokości jako „100px".
• "wysokość”Ustawia wysokość przycisku jako„80px"
• "Radiusz graniczny„Własność określa rogi zaokrąglonego elementu:

Krok 3: Zastosuj właściwość „: Hover” na przycisku

Teraz zastosuj „:unosić się”Pseudoklasa wraz z elementem przycisku, aby dodać efekt najemnika na przycisk:

Przycisk: Hover
kolor tła: RGB (16, 185, 190);

Można zauważyć, że efekt zawisu jest dodawany do przycisku, który zmienia kolor przycisku.

Wniosek

Aby ustawić rozmiar przycisku, najpierw utwórz przycisk za pomocą „" element. Następnie dostęp do przycisku w CSS według nazwy znacznika i zastosuj „wysokość" I "szerokość”Właściwości CSS, aby ustawić swój rozmiar. Ponadto użytkownicy mogą również stosować inne nieruchomości CSS, w tym „kolor”„Button-Radius" I "kolor tła„Do stylizacji. Ten post wykazał procedurę ustawiania rozmiaru przycisku.