Przycisk CSS kliknął
Przykład 01: Używanie CSS do wykonania przycisku wytworzyć efekt odbicia w pliku HTML
W tym przykładzie będziemy używać CSS tagów stylu, aby przekształcić przycisk w efekt kliknięcia. Skoncentrujemy się na skutku kliknięcia przycisku i animuj przycisk, aby uzyskać efekt kliknięcia.
Otworzyliśmy znacznik stylu w nagłówku pliku, w którym zdefiniujemy stylizację przycisku w osobnej klasie, którą można wywołać w dowolnym znaczniku przycisku w całym pliku. Otworzymy nawias po nadaniu klasy imieniu. Następnie zaczniemy od podania go (w pikselach), aby dostosować przycisk na stronie. Następnie podamy kolor tła przycisku. Następnie zostanie użyta właściwość pudełka. Wartość obejmowałaby format piksela dla cienia i formatu RGBA dla koloru cienia. Następnie podamy przycisk kursor wskaźnika. Gdy przycisk zostanie kliknięty, kursor zostanie przekształcony z powodu tej właściwości. Ostatnią właściwością będzie właściwość przejściowa, która określi czas reakcji animacji przycisku.
Po zamknięciu nawiasu sklasyfikujemy inną funkcję dla tej klasy osobno. W tej funkcji określamy skalę transformacji i zmianę cienia granicy za pomocą tego samego formatu, którego używaliśmy wcześniej. Następnie otworzymy znacznik ciała i nadajemy mu nagłówek i przycisk. W znaczniku przycisku wymienimy nazwę klasy, którą właśnie utworzyliśmy w znaczniku stylu obecnym w nagłówku pliku.
Widzimy, że przycisk na powyższym wyjściu ma cień, a wyściółka jest widoczna. Chociaż animacja byłaby bardziej widoczna w przeglądarce, ale styl jest bardziej widoczny w powyższym fragmencie.
Przykład 02: Używanie CSS do wykonania odbicia przycisku w pliku HTML
W tym przykładzie użyjemy tagów stylów CSS, aby pocisnąć odbicie przycisku. Skoncentrujemy się na wyniku kliknięcia przycisku i animuj przycisku, aby uzyskać efekt odbicia.
W powyższym skrypcie otworzyliśmy znacznik stylu w nagłówku pliku, aby określić styl przycisku. Styl przycisku jest przechowywany w osobnej klasie, która może być używana w dowolnym znaczniku przycisków w całym projekcie. Po podaniu nazwy klasy A otworzymy nawiasy klasy. Najpierw podamy przycisk kursor wskaźnika, aby po kliknięciu kursor zmienił. Następnie dodamy trochę wyściółki (w pikselach), aby zmienić pozycję przycisku na stronie. Wreszcie, ustawym kolor tła przycisku. Następnie właściwość Box-Shadow zostanie wykorzystana z wartością składającą się z formatu Pixel dla formatu cienia i RGBA dla koloru cienia. Wykonamy również to wyrównanie.
Po zamknięciu nawiasów klasy kategoryzujemy inną funkcję dla tej klasy.Określymy skalę transformacji i zmiany w cieniu granicy w tym samym formacie, którego użyliśmy w poprzedniej właściwości. Następnie otworzymy znacznik ciała i dodamy do niego nagłówek i przycisk. W naszym znaczniku przycisku zadeklarujemy nazwę klasy, którą właśnie zbudowaliśmy w znaczniku stylu w nagłówku naszego pliku.
Widzimy, że przycisk na powyższym zrzucie ekranu ma cały styl, który określliśmy w stylu, a animacja klikania przycisku byłaby zauważalna w przeglądarce.
Przykład 03: Używanie CSS do przekształcenia koloru przycisku po kliknięciu
W tym przykładzie zmienimy kolor przycisku, gdy zostanie kliknięty. W tym przykładzie użyjemy CSS i wszystkie stylowanie zostanie zdefiniowane w znaczniku stylu dla elementu przycisku.
W powyższym skrypcie otworzymy znacznik stylu w nagłówku pliku. Następnie zdefiniujemy właściwości stylizacyjne dla domyślnego przycisku, który podaje język znaczników hipertekstu. W stylu zaczniemy od podania przycisku żółtego koloru tła. Następnie zadzwonimy do klasy przycisku z właściwością przejścia Focus i jej nawiasem. Zdefiniujemy kolor tła, który będzie inny od wcześniej zdefiniowanego koloru tła. Spowoduje to zmianę koloru po kliknięciu przycisku.
Teraz otworzymy ten plik HTML w naszej przeglądarce i obserwujemy transformację przycisku.
W tym fragmencie widzimy, że przycisk ma stylizację zdefiniowaną w pierwszej właściwości znacznika stylu, a po kliknięciu go otrzymujemy następujące dane wyjściowe:
Przycisk przekształcił się po kliknięciu, a kolor jest teraz czerwony zgodnie z definicją w nawiasach skupienia przycisku.
Przykład 04: Używanie CSS do zmiany kształtu przycisku po kliknięciu
Po kliknięciu przycisku zmodyfikujemy jego kształt w tym przykładzie. W tym przykładzie zastosujemy CSS. Cała stylizacja zostanie zdefiniowana w znaczniku stylu dla elementu przycisku. Właściwość Focus Button, która spowoduje zmianę kształtu i koloru przycisku.
Otworzymy znacznik stylu w nagłówka. W tagie stylu zaczniemy od uczynienia tła przycisku na czerwono i przypisania rozmiaru do tekstu przez właściwość wielkości czcionki. Następnie wywołamy klasę przycisku z właściwością Focus Transition i zdefiniujemy kolor tła. Będzie różny od wcześniej określonego koloru tła, który jest fioletowy. Następnie dodamy właściwość Border-Radius i przypisamy jej wartość w pikselach. Tak więc, gdy przycisk zostanie kliknięty, kształt i kolor zmienią się.
Powyższe wyjście pokazuje stan przycisku przed kliknięciem. Przycisk ma prostokątną obramowanie z czerwonym tłem, a jeśli klikniemy przycisk, otrzymamy poniższe wyjście:
Teraz możemy zobaczyć transformację koloru i kształtu przycisku, ponieważ granica ma zaokrąglone krawędzie i fioletowe tło.
Wniosek
W tym artykule przyjrzeliśmy się różnym przykładom, które CSS pozwala nam stworzyć efekt na element przycisku języka znaczników hipertekstu po kliknięciu. W tym artykule zastosowaliśmy podejście tagowe, aby dodać CSS do elementu przycisku. Skoncentrowaliśmy się na transformacji koloru, kształtu i cienia przycisku, a nawet dodaliśmy kilka animacji do przycisku, gdy zostanie kliknięty. W tym artykule wykorzystaliśmy Notatnik ++ IDE.