Zamknij przycisk CSS
Przykład 1:
Utworzymy plik HTML, aby zaprojektować nasz przycisk zamknięcia. Zostanie utworzony plik CSS, w którym stylizujemy nasz przycisk zamknięcia. Do tych wszystkich używamy kodu Visual Studio. Kiedy tworzymy plik HTML, w kodzie Visual Studio, piszemy kod w tym pliku. Musimy zapisać plik HTML z rozszerzeniem pliku „.html ”i plik CSS z rozszerzeniem„.CSS ”. Wypróbujmy dany kod:
Kod powyżej jest kodem HTML, więc tutaj jest rodzaj tego dokumentu wymienionego jako „HTML”. Używamy tagów w HTML, więc musimy otworzyć znaczniki „” i „”. Meta jest zdefiniowana w znaczniku „” i ustawia się jako „Charset = UTF-8”. Korzystając z tego, możemy używać wielu znaków. Do linkowania z plik CSS używamy tutaj „”, a „REL” opisuje związek. „HREF” służy do podania nazwy pliku CSS, który musimy dołączyć do tego pliku HTML. Łączymy „ButtonStyle.plik CSS ”za pomocą„ ”.
Teraz zamknij „” i otwórz tag „”. Klasa „” jest tutaj w celu oddzielenia danych od sieci. Musimy zaprojektować przycisk w tym pliku HTML. Typ przycisku to „przycisk”, a klasa nazywa się „BTN-CLOSE”. Następnie otwórz „”, a ta klasa spędzona jest zdefiniowana z nazwą „Icon-Cross”. „& Time” wyświetli przycisk „X”. Zamknąć "", "", "
oraz „” tagi.
Kod CSS:
W kodowaniu CSS podajemy styl naszemu przyciskowi zamknięcia, który utworzyliśmy w pliku HTML. Najpierw wspomnij o klasie przycisków, która jest „BTN-CLOSE”. Umieść kropkę przed tym „BTN-CLOSE” i otwartym nawiasem. Ustaw „Margin”, „Border” i „Padding” na „0”. Ponieważ margines jest do tworzenia przestrzeni, granica służy do tworzenia granicy wokół przycisku. Wypadanie służy do tworzenia przestrzeni między elementami, więc ustawiamy je wszystkie jako „0”.
Chcemy zastosować „czarny” jako kolor tła, więc umieszczamy tutaj „tło: czarny”. „Kolor” opisuje kolor czcionki lub krzyża. „Promień graniczny” dostosował się do „20%”. Szerokość opisuje szerokość przycisku zamknięcia, która jest „40px”, a wysokość wynosi również „40px”. „Wyświetlacz” to „Flex”, więc ustawi elastyczną długość na wyświetlacz. Właściwość „Flex-Flow” jest tutaj stosowana do „kolumny nowrap”. Musimy uzasadnić treść do centrum. Tak więc linia „Justify-Content: Center” uzasadni ją do centrum. Dopasuj również przedmioty do centrum. Wybierz „kursor” jako „wskaźnik”. Przejście jest stosowane, ponieważ będzie kontrolować prędkość, gdy zmienia się właściwość CSS. Jest ustawiony jako „wszystkie 150 ms”.
W przypadku wyjścia musimy użyć przeglądarki. Możemy użyć dowolnej przeglądarki. Zainstalowaliśmy przeglądarkę, naciskając „Ctrl+Shift+X” i instalując „Otwórz w przeglądarce”. Następnie, do renderowania wyjścia, naciśniemy „Alt+B”, a wyjście zostanie wyświetlone, a przycisk pojawi się na ekranie, który pokazano poniżej.
Tutaj możesz zobaczyć, że tworzymy prosty przycisk zamknięcia. W nadchodzących przykładach stworzymy więcej niż jeden przycisk Zamknij i zaprojektujemy je przy użyciu różnych kolorów i kształtów w CSS.
Przykład nr 2:
W tym przykładzie utworzymy więcej niż jeden przycisk Zamknij i zastosujemy różne kolory do tych przycisków zamykania. Utwórz przyciski Zamknij w pliku HTML.
W tym pliku HTML tworzymy wiele przycisków zamykania za pomocą znacznika „”. Nazwaliśmy klasę przycisku „przyciskiem” do tworzenia pierwszego przycisku. Następnie umieść symbol „x”, który jest wyświetlany jako bliski znak „x”. Nazwaliśmy drugą klasę przycisków „Button Button2”. Nazwa klasy trzeciej przycisku to „Button Button3”. A czwarte i piąte przyciski są odpowiednio „Button Button4” i „Button Button5”. Musimy zamknąć znacznik przycisku na każdej linii.
Kod CSS:
W pierwszym wierszu umieść kropkę, a następnie wpisz nazwę pierwszego przycisku, który jest tutaj „przycisk” i zacznij projektować przycisk. Kolor „tła” pierwszego przycisku zamknięcia to „#4caf50”, który jest kodem zielonego koloru, więc pierwszy przycisk zamknięcia będzie wyglądał zielony. Kolejnym „kolorem” jest ustawienie koloru „x” na „biały”.
Teraz „wyściółka” jest pionowa „15px” i stosuje się pionę „32px”. „Wyrównanie tekstu” jest ustawione na „centrum”. Nie mamy żadnego tekstu napisanego w przycisku Zamknij, więc ustawiamy właściwość „Dekoracja tekstu” na „Brak”. „Wyświetlacz” jako „Inline-Block” służy do wyświetlania pojemnika inline-blokowego. Napraw „rozmiar czcionki” na „16px”. A marginesy pionowe to „4px”, a poziom poziomy to „2px”. „Wskaźnik” jest używany jako „kursor”.
Teraz chcemy zmienić kolory tła pozostałego przycisku, więc po prostu dodajemy kolor tła do pozostałych przycisków. Zamknij wspornik pierwszego przycisku. Umieść kropkę i nazwę drugiego przycisku i ustaw kolor tła. Kod koloru tła to „#008CBA”, który wyświetla się jako „niebieski”. Zmień kolor wszystkich przycisków z tą samą właściwością i zapisz go. Zobacz wyjście, wszystkie przyciski zamknięte są w różnych kolorach.
Przykład nr 3:
Używamy naszego poprzedniego pliku HTML, który utworzyliśmy w przykładzie 2 i po prostu zmieniamy kod CSS. Następnie zastosuj różne kształty do przycisku Zamknij tutaj w tym przykładzie.
Kod CSS:
Ustawiliśmy kolor tła dla pierwszego przycisku jako „zielony”. Wypadkowanie to „20px”, a to będzie miało zastosowanie do wszystkich czterech stron. „Rozmiar czcionki” jest zmieniany na „16px”. Margines to pionowy i „4px” i „2px”. Nowa nieruchomość, którą dodaliśmy do pozostałych przycisków, jest właściwość „promieniowania granicznego”. To zmieni narożniki przycisku w okrągły kształt. A także zastosuj różne kolory do wszystkich przycisków.
„Radiusz graniczny” dla pierwszego przycisku jest ustawiony jako „2px”, a kolor jego „tła” jest „czerwony”. Drugi przycisk „Radiusz graniczny” to „4px”, a „kolor tła” jest „niebieski”. Trzeci, czwarty i piąty przyciski „Radiusz graniczny” to odpowiednio „8px”, „12px” i „50%”. Ponadto kolory tła tych przycisków to odpowiednio „żółty”, „fioletowy” i „pomarańczowy”. Sprawdź wyjście i zobacz, jak te przyciski zamknięte pojawiają się w przeglądarce.
Na powyższej mocy można zauważyć, że zakątki przycisków zamkniętych są zaokrąglone. Wszystkie bliskie przyciski mają różne kształty. Ostatnim przycisk zamknięcia to przycisk zamknięcia okręgu. Stosujemy wszystkie te styl w naszym pliku CSS.
Wniosek:
Ten przewodnik jest przewidziany, aby wiedzieć, jak utworzyć przycisk Zamknij w HTML i CSS. Tutaj zaprojektowaliśmy i stylizowaliśmy różne przyciski bliskie. Zapewniliśmy również kod HTML i CSS oraz wyjście wszystkich kodów. Nauczyłeś się użycia HTML i CSS w tym przewodniku i będziesz mógł tworzyć przyciski zamykania, gdy tylko potrzebujesz ich w swoich projektach lub stronach internetowych. Wyjaśniliśmy również kody tutaj i zademonstrowaliśmy dla Ciebie trzy różne przykłady.