HTML zapewnia różne elementy; Jednym z nich jest „przycisk”, Który służy do wykonywania konkretnej akcji na stronie internetowej. Korzystając z CSS, możesz stylizować przycisk na różne sposoby, takie jak rozmiar przycisku, kolor, kształt, najechanie i wiele innych. Aby to zrobić, różne właściwości CSS można wykorzystać do stylizowania przycisku zgodnie z wymaganiami.

Ten podręcznik nauczy Cię procedury modyfikacji koloru przycisku. Zaczynajmy!

Jak zmienić kolor przycisku w CSS?

Możesz zmienić kolor przycisku za pomocą „kolor tła”Właściwość i ustaw kolor przycisku zgodnie z preferencjami. Zasadniczo „„kolor tła„Właściwość jest wykorzystywana do dodania koloru tła elementów HTML.

Składnia

Składnia właściwości koloru tła jest następująca:

Kolor tła: wartość

W miejscu wartości koloru tła możesz ustawić kolor, który chcesz wyświetlić za elementami HTML.

Teraz przejdźmy do praktycznego przykładu, w którym zmienimy kolor przycisku.

Przykład

Najpierw dowiedz się, jak utworzyć przycisk w Div, a następnie zmienić jego kolor za pomocą CSS.

Krok 1: Utwórz Div & przycisk

W HTML utworzymy DIV i przypiszmy nazwę klasy jako „div". Wewnątrz znacznika dodamy nagłówek za pomocą

tag i przycisk za pomocą znacznika o nazwie klasy jako „Btn". Tekst wyświetlany na przycisku to „Kolor".

Html

Zmień kolor przycisku w CSS

Kolor

Można zauważyć, że utworzone są div i przycisk:

Teraz przejdziemy do następnego kroku, aby stylizować utworzoną div za pomocą CSS.

Krok 2: Style Div

Tutaj użyj „.div„Aby uzyskać dostęp do utworzonego pojemnika i ustawić jego wysokość jako„200px". Następnie stygnij DIV, używając „granica„Własność, aby ustawić granicę wokół Div. Szerokość granicy jest ustalana jako „4px”, Jego styl jako„rowek”, I kolor jako„RGB (1, 34, 77)". Ustawimy kształt granicy z „Radiusz graniczny„Właściwość i ustal jej wartość jako„25px". Następnie użyj „kolor tła„Właściwość, aby ustawić kolor tła Div i przypisać wartość koloru jako„RGB (210, 243, 241)".

CSS

.div
Wysokość: 200px;
Border: 4px Groove RGB (1, 34, 77);
RADIUS Border: 25px;
kolor tła: RGB (210, 243, 241);

W rezultacie utworzony pojemnik zostaje stylizowany:

Przejdźmy do ostatniego kroku, w którym pokolorujemy przycisk za pomocą CSS.

Krok 3: Zmień kolor przycisku

Po stylizacji DIV w CSS użyjemy „.Btn„Aby uzyskać dostęp do przycisku utworzonego w HTML. Następnie ustaw wartość właściwości granicznej jako „nic„Aby usunąć domyślny styl graniczny. Określ wartość właściwości promieniowania granicznego jako „15px„Aby ustawić kształt przycisku

Styl tekst przycisku za pomocą właściwości wielkości czcionki i ustaw jej wartość jako „XX-LARGE". Następnie użyjemy wyściółki jako „10px„Aby stworzyć przestrzeń między dodanym tekstem a granicą przycisku.

W końcu użyj właściwości kolorów i ustaw jej wartość jako „RGB (255, 251, 7)„Aby pokolorować tekst i właściwość w kolorze tła jako„RGB (43, 87, 84)„Aby ustawić kolor przycisku:

.btn
Border: Brak;
RADIUS BERDER: 15px;
Rozmiar czcionki: XX-LARGE;
Wyściółka: 10px;
Kolor: RGB (255, 251, 7);
kolor tła: RGB (43, 87, 84);

Podane wyjście stwierdzono, że kolor przycisku jest skutecznie zmieniony:

Wyjaśniliśmy metodę zmiany koloru przycisku w CSS.

Wniosek

W CSS „kolor tła„Właściwość jest wykorzystywana do ustawienia koloru przycisku. Korzystając z tego, możesz ustawić kolor zgodnie z wyborem i elegancko zaprojektować przycisk. Możesz także użyć różnych właściwości, aby poprawić wygląd przycisku za pomocą CSS. W tym przewodniku wyjaśniliśmy metodę zmiany koloru przycisku w CSS i podaliśmy przykład lepszego zrozumienia.