Podczas projektowania witryny internetowej często masz przycisk, który ma wyglądać w określony sposób. Na przykład możesz chcieć, aby przycisk miał kolor tła niż inne elementy na stronie, aby przyciągnąć uwagę użytkownika do przycisku.
Za pomocą CSS programiści mogą tworzyć przyciski ze stylami. CSS umożliwia zmianę między innymi.
kolor, rozmiar tekstu, obramowanie, szerokość i wysokość przycisku. Ten samouczek omówi z przykładami, jak używać serii właściwości CSS do stylizowania kodu HTML przycisk. Zanim skończysz czytać ten samouczek, będziesz ekspertem w stylizacji przycisków za pomocą CSS.
Przegląd przycisków
Możesz zdefiniować przycisk na wiele sposobów HTML. Dwa najpopularniejsze podejścia to Znajdź swój Bootcamp
Jeśli chcemy stylizować nasz przycisk, innymi słowy, aby dostosować wygląd strony, musimy użyć css. W tym artykule omówimy, jak wykonać następujące czynności na przycisku: ..
Zmień kolor tła
Zmień kolor tekstu
Zmień rozmiar tekstu.
Dodaj dopełnienie.
zaokrąglij rogi.
Dodaj kolorową ramkę.
Użyj: .... funkcja najechania kursorem
Dodaj cień
Zmień szerokość
wyłącz
Animuj ją.
Omówimy również, jak tworzyć grupy przycisków poziomych i pionowych.
Tył - kolor płaszczyzny
Podczas projektowania przycisku pierwszą rzeczą, którą możesz chcieć zrobić, to ustawić kolor tła - plan dla przycisku. Domyślnie przycisk ma białe tło i czarny tekst. Używając koloru tła CSS, c zmienić kolor tła przycisku.
Załóżmy, że projektujesz przycisk dla witryny internetowej i chcesz, aby przycisk miał różowe tło. Możemy zmienić kolor naszego przycisku za pomocą następującego kodu CSS:
Nasz kod zwraca:
Używając właściwości koloru tła zmieniliśmy kolor tła naszego przycisku na różowy. Za pomocą tej właściwości możemy zmienić kolor tła naszego przycisku na kolor.
Kolor tekstu
Aby zmienić kolor tekstu przycisku, możesz użyć właściwość color. przycisk i chcesz, aby przycisk miał różowe tło, a tekst na zielono. Możemy utworzyć ten przycisk za pomocą następującego kodu:
Nasz kod zwraca:
Nasz przycisk ma ten sam rozmiar co poprzednio, ale teraz rozmiar znaków wewnątrz to 20px. Użyliśmy atrybutu rozmiaru czcionki, aby ustawić rozmiar tekstu w naszym przycisku.
Padding
Podczas projektowania przycisku możesz zdecydować, że potrzebujesz pewnej ilości miejsca między tekstem wewnątrz przycisku a zewnętrznymi ścianami przycisku. W tym miejscu w grę wchodzi amortyzacja .
Właściwość padding wykorzystuje wskaźniki długości (px, em i tak dalej ) lub wartości procentowe, aby zdefiniować określoną odległość między przyciskami tekstowymi a ich obramowaniami.
Załóżmy, że chcemy utworzyć dwa przyciski na naszej stronie. Jeden przycisk powinien mieć dopełnienie 40 pikseli, a drugi powinien mieć dopełnienie 20px. Możemy utworzyć te przyciski za pomocą następującego kodu:
Nasz kod zwraca:
Można użyć właściwości border-radius do tworzenia prostokątnych przycisków z zaokrąglonymi rogami. Oto trzy przykłady kodu, które używają właściwości border-radius. Aby zilustrować efekt różnych rozmiarów promienia, w każdym przykładzie zastosowano inny promień obramowania.
