Stylizacja guzika w CSS | Wyjaśnione

Wstawienie zwykłych przycisków do Twojej witryny może być nieco nudne, jednak dodanie do nich różnych stylów może poprawić ich ogólny wygląd. Ten styl można wykonać przy użyciu wielu właściwości CSS, takich jak kolor tła, kolor, szerokość, wyściółka, shadow, przejście itp. Tutaj, w tym artykule, nauczymy Cię, jak stylizować przyciski w różnych modzie. Ten post ma na celu pokrycie następujących tematów.

1. Zmiana kolorów przycisków
2. Zmiana rozmiarów przycisków
3. Tworzenie zaokrąglonych lub okrągłych przycisków
4. Dodawanie efektu zawisowego do przycisków
5. Dodawanie efektów do przycisków
6. Dodawanie cieni do przycisków
7. Przyciski wyłączone w stylu

Zacznijmy.

Jak zmienić kolory przycisków

W celu zmiany kolorów, dokładniej, kolorów tła przycisków, używana jest właściwość koloru tła CSS. Poniżej przedstawiliśmy ci przykład.

Html

Przycisk

Korzystając z podstawowej HTML, utworzyliśmy przycisk.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 20px 35px;
Rozmiar czcionki: 16px;

Oprócz nadania przycisku określonego rozmiaru wyściółki, granicy i czcionki, ustawiliśmy kolor tła na różowy brąz. Możesz zmienić kolor zgodnie z pragnieniem.

Wyjście

Utworzono przycisk z różowym brązowym kolorem tła.

Jeśli chcesz dodać kolory tylko do granicy przycisku, użyj właściwości granicznej CSS.

CSS

.btn
kolor tła: biały;
granica: 2px stały niebieski;
czarny kolor;
Wyściółka: 25px;
Rozmiar czcionki: 16px;

W powyższym kodzie ustawiamy kolor tła na biały, w międzyczasie stał.

Wyjście

Wygenerowano przycisk z niebieską obramową.

Jak zmienić rozmiary przycisków

Mogą istnieć różne sposoby zmiany rozmiaru przycisku, a wszystkie możliwe sposoby opisano poniżej wraz z odpowiednimi i punktowymi przykładami.

Metoda 1: Zmieniając wyściółkę przycisków

Pierwszym i najczęściej używanym sposobem zmiany rozmiaru przycisku jest użycie właściwości wyściółki. Różne wyściółki spowoduje różne rozmiary przycisku.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Rozmiar czcionki: 16px;

.BTN1
Wyściółka: 10px 24px;

.btn2
Wyściółka: 32px 16px;

Górne i dolne boki pierwszego przycisku przypisano wyściółkę 10px, tymczasem prawą i lewą boki otrzymują wyściółkę 24px. Jeśli chodzi o drugi przycisk, górna część i dolne strony są wyposażone w wyściółkę o 32 px każdy, podczas gdy po prawej i lewej stronie są podawane z wyściółką 16px.

Wyjście

Utworzono przyciski z różnymi wybiegami.

Metoda 2: Zmiana wielkości czcionki

Innym sposobem zmiany rozmiaru przycisku jest zmiana wielkości czcionki przycisku TE. Poprzez zwiększenie lub zmniejszenie wielkości czcionki, dotknięty jest rozmiar przycisku. Im większy rozmiar czcionki, tym większy przycisk. Rozważ fragment kodu poniżej.

Html

Przycisk
Przycisk

Tutaj utworzyliśmy dwa przyciski, aby zademonstrować różnicę między różnymi rozmiarami czcionek a tym, jak wpływają one na rozmiary przycisków.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 20px 35px;

.BTN1
Rozmiar czcionki: 12px;

.btn2
Rozmiar czcionki: 24px;

Oba przyciski przypisano ten sam kolor tła, kolor, granica i wyściółka. Jednak pierwszym przyciskiem przypisano rozmiar czcionki 12px, a drugi przycisk 24px.

Wyjście

Przyciski o różnych rozmiarach zostały pomyślnie utworzone.

Metoda 3: Zmieniając szerokość przycisków

Innym sposobem zmiany rozmiaru przycisku jest dostosowanie jego szerokości. Postępuj zgodnie z przykładem poniżej.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 20px 35px;
Blok wyświetlacza;
Margines: 5px 3px;
Rozmiar czcionki: 16px;

.BTN1
Szerokość: 20%;

.btn2
Szerokość: 50%;

W celu wyświetlania każdego przycisku w nowej linii przekształcamy je w elementy na poziomie blokowym i ustawiamy margines. Ponadto szerokość pierwszego przycisku jest ustawiona na 20%, podczas gdy szerokość drugiego przycisku jest ustawiona na 50%.

Wyjście

Przyciski o różnych szerokościach zostały stworzone z powodzeniem.

Jak tworzyć zaokrąglone lub okrągłe przyciski

Aby stworzyć zaokrąglone lub okrążone przyciski, użyj właściwości CSS Border-Radius. Przedstawiliśmy ci przykład.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 25px;
Rozmiar czcionki: 16px;

.BTN1
RADIUS Border: 8px;

.btn2
Radiusz graniczny: 50%;

W powyższym kodzie, w celu zaokrąglenia zakątków przycisku, nadajemy promieniowi granicowi wartość w pikselach. Jednak, aby przycisk był kompletnym okrągiem, daliśmy promieniowi granicowi wartości procentowej.

Wyjście

Z łatwością powstał zaokrąglony i okrągły przycisk.

Jak dodać efekt najemnika do przycisków

Aby Twoje przyciski są bardziej interesujące, możesz dodać do nich efekt najemnika, aby ich wygląd był bardziej atrakcyjny. Użyj fragmentu kodu poniżej.

CSS

.btn
kolor tła: biały;
granica: 2px Solid RosyBrown;
czarny kolor;
Wyściółka: 25px;
Rozmiar czcionki: 16px;

.BTN: HOVER
kolor tła: Rosybrown;
kolor biały;

Przed efektem nachylenia przycisk został zaprojektowany przy użyciu różnych właściwości CSS. Tymczasem, gdy użytkownik przyniesie mysz na przycisk, kolor tła zmieni się na różowy brąz, a kolor czcionki na biały.

Wyjście

Wygenerowano przycisk z efektem zawisowego.

Kolejną zabawą, którą możesz zrobić, jest określanie czasu przejścia efektu najemnika, aby uczynić go bardziej atrakcyjnym, używając właściwości przejściowego.

CSS

.btn
kolor tła: biały;
granica: 2px Solid RosyBrown;
czarny kolor;
Wyściółka: 25px;
Rozmiar czcionki: 16px;
Przejście czas trwania: 0.5s;

.BTN: HOVER
kolor tła: Rosybrown;
kolor biały;

Czas przejścia został ustawiony na 0.5 sekund.

Wyjście

Z powodzeniem dodano efekt nachylenia z czasem przejściowym.

Jak dodać zanik w przyciskach

Fade w efektach jest stosowane wraz z efektami unoszącymi się i można je dodać do przycisków za pomocą właściwości krycia. Oto przykład.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 30px;
Rozmiar czcionki: 16px;
Krycie: 0.4;
Przejście czas trwania: 0.5s;

.BTN: HOVER
Krycie: 1;

Przed efektem nachylenia krycie przycisku została ustawiona na 0.4. Natomiast, gdy efekt zawisu się zainicjuje, krycie obróci się do 1 z czasem przejściowym 0.5 sekund.

Wyjście

Zniknięto wdrożenie z powodzeniem.

HWO, aby dodać cienie do przycisków

Korzystając z właściwości Box-Shadow, do przycisków można dodać cienie, aby ulepszyć ich piękno. Postępuj zgodnie z podsumowanym przykładem.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 30px;
Rozmiar czcionki: 16px;
Przejście czas trwania: 0.5s;
Shadow Box: 0 5px 10px 0 Gray;

W powyższym kodzie dodajemy cień szarego koloru i przypisaliśmy każdą stronę cienia długości.

Wyjście

Do przycisku dodano cień do przycisku.

Notatka: Możesz także dodać efekt zawisowy.

Jak stylizować wyłączane ciastki

Aby wykonać przycisk wyłączalny, musimy wspomnieć o niepełnosprawnym atrybucie znacznika przycisku w HTML, jak pokazano w fragmencie HTML poniżej:

Przycisk

Do celów stylizacji niepełnosprawnych możesz użyć dwóch właściwości CSS, które są: kryzys i kursor. Poniżej pokazaliśmy, w jaki sposób możesz utworzyć przycisk wyłączony.

CSS

.btn
kolor tła: Rosybrown;
Border: Brak;
kolor biały;
Wyściółka: 30px;
Rozmiar czcionki: 16px;
Przejście czas trwania: 0.5s;
Krycie: 0.4;
Kursor: nie unieważniony;

Aby utworzyć przycisk wyłączony, krycie przycisku wynosiła 0.4 i kursor do niezadowolonego.

Wyjście

Wygenerowano przycisk wyłączony.

Wniosek

Dodanie zwykłych przycisków do twoich stron internetowych może być nieco nudne, jednak stylizacja ich za pomocą różnych właściwości CSS może zwiększyć ich ogólny wygląd. Właściwości takie jak kolor tła, kolor, promień graniczny, krycie, wyściółka, szerokość, shadow itp. Poza tym możesz również dodać różne efekty do przycisków, takich jak zawieszek, lub zniknąć itp. Ponadto możesz również aniować te efekty, stosując właściwość przejściową. Ten post prowadzi o różnych sposobach, w jakie możesz stylizować przyciski za pomocą przykładów.