Jak stylizować przycisk wprowadzania i przesyłania za pomocą CSS
CSS to język tworzenia arkuszy stylów, które opisują, w jaki sposób dokument jest prezentowany w języku znaczników, taki jak HTML lub XML. Wraz z HTML i JavaScript, CSS jest kluczowym elementem sieci WWW. Korzystając z CSS, użytkownicy mogą stylizować wszystkie elementy HTML, w tym tabele, przyciski, pola wejściowe, formularze i wiele innych.
Ten post wyjaśni:
- Jak stylizować pola wejściowe za pomocą CSS?
- Jak stylizować przycisk Przesyłania z CSS?
Jak stylizować pola wejściowe za pomocą CSS?
Aby stylizować pole wejściowe za pomocą CSS, wypróbuj wspomnianą procedurę.
Krok 1: Utwórz formularz wejściowy
Przede wszystkim utwórz formę w HTML. Aby to zrobić, postępuj zgodnie z instrukcjami wymienionymi poniżej:
- Najpierw utwórz formę z pomocą „”Tag.
- Wewnątrz formy „„Element jest zdefiniowany w celu określenia podpisów dla„wejście" elementy. Etykieta „Do„Atrybut służy do dołączania elementu etykiet do elementu przez„ID".
- „„typ”Atrybut określa typ wejściowy, taki jak tekst lub liczba.
- „„klasa„Atrybut ma przypisany„Wejście" nazwa, "symbol zastępczy„Atrybut przydziela tekst zastępczy w polu wejściowym:
Wyjście
Krok 2: Przycisk wejściowy stylu w CSS
Aby stylizować przycisk wejściowy w CSS, sprawdź podane właściwości:
wejście
Wyściółka: 8px;
RADIUS BRAVES: 10px;
Margines: 5px Auto;
Border: 1px Solid #918383;
kolor tła: #87B8B8;
Shadow Box: 1px 2px 1px 2px RGB (230, 229, 229);
Kolor: #C9C2C2;
Zarys: Brak;
Rozmiar czcionki: 18px;
Uzyskać dostęp do "wejście„Klasa, a następnie zastosuj poniżej wspomniane nieruchomości:
- Ustawić "wyściółka”To określa przestrzeń wokół treści elementu.
- "Radiusz graniczny”Właściwość ustawia krawędzie elementu okrągłe.
- "margines„Własność o wartości”5px Auto„Dodaje przestrzeń”5px”Na górze i na dole i„automatyczny”Służy do ustawiania równej przestrzeni wokół elementu po lewej i prawej stronie.
- "granica„Własność określa granicę wokół stołu.
- "kolor tła„Właściwość jest wykorzystywana do określenia koloru tła.
- "Shadow Box”Dodaje cień wokół elementu. Jest to właściwość skrótów, która określa X-Offset, Y-Offset, efekt rozmycia, efekt rozprzestrzeniania się i kolor dla cienia.
- "kolor„Własność odnosi się do koloru czcionki elementu.
- "zarys”Dostosowuje linię wokół elementów, aby dominuje.
- "rozmiar czcionki„Właściwość jest wykorzystywana do ustawienia rozmiaru czcionki elementu.
Wyjście
Następnie dostęp do „etykieta„Element do stylizacji:
etykieta
Rozmiar czcionki: 18px;
Kolor: RGB (15, 15, 15);
Margines: 20px;
Po uzyskaniu dostępu do elementu etykiety zastosuj wybrany stylisty. Na przykład zastosowaliśmy „rozmiar czcionki”,„kolor", I "margines" nieruchomości.
Wyjście
Przejdźmy do następnej sekcji, aby stylizować przycisk Przesyłania za pomocą CSS.
Jak stylizować przycisk Przesyłania z CSS?
Aby stylizować przycisk Przesyłania za pomocą CSS, zbadaj poniższy przykład, który pokazuje krokowy przewodnik na temat tworzenia i stylizowania przycisku HTML.
Krok 1: Utwórz przycisk Prześlij
Początkowo dodaj tekst nagłówka do znacznika nagłówka „". Następnie utwórz przycisk, wykorzystując „”Element i ustaw typ przycisku jako„składać”:
Element guzika stylu
Wyjście
Krok 2: Element „Style„ Button ”
Aby stylizować przycisk w CSS, sprawdź właściwości opisane poniżej:
przycisk
Wyściółka: 12px 40px;
RADIUS Border: 8px;
Box-Shadow: 2px 2px 2px 1px RGB (131, 131, 219);
granica: 1px stały szary;
Rozmiar czcionki: 20px;
Uzyskaj dostęp do elementu przycisku według nazwy znacznika i zastosuj właściwości na przycisk zgodnie z preferencją. Na przykład zastosowaliśmy „wyściółka”,„Radiusz graniczny”,„Shadow Box”,„granica", I "rozmiar czcionki" nieruchomości.
Wyjście
Dodajmy efekt najemnika na element przycisku:
Przycisk: Hover
kolor tła: kadetblue;
Kolor: RGB (246, 244, 248);
„„Przycisk: Wather„Wykorzystuje się selektor do zastosowania wpływu nalotu na przycisk. Z pomocą „unosić się„Selektor, użytkownicy mogą generować efekt CSS w czasie rzeczywistym. Na przykład ustawiliśmy „kolor tła" I "kolor”Właściwości, jak opisano powyżej:
Omówiliśmy, aby stylizować pole wejściowe i przesłać przycisk z CSS.
Wniosek
Aby stylizować element wejściowy i przycisk Przesyłania CSS, używane są różne właściwości CSS, w tym „wyściółka”, „promień graniczny”, „box-shadow”, „margines”, „granica”, „kolor tła”, „ wielkości czcionki ”i wiele innych. Użytkownicy mogą zastosować określone właściwości, uzyskując dostęp do elementów za pomocą nazwy znacznika. Ten post wykazał metodę stylizacji pól tekstowych i przesyłania przycisków z CSS.