Jak zrobić przycisk 3D za pomocą CSS

Graficzny interfejs strony internetowej odgrywa istotną rolę w jakości witryny lub aplikacji internetowej. Aby zwiększyć użyteczność i uczynić interfejs atrakcyjnym, ćwiczy się wiele pomysłów. Podobnie jak inne elementy na interfejsie, na prawie każdej innej stronie internetowej znajdują się kilka przycisków, które wykonują różne operacje. Jedną z najczęstszych technik ulepszenia graficznego wyświetlacza interfejsu jest tworzenie przycisku 3D, a nie zwykły tradycyjny przycisk.

Omówmy, w jaki sposób przycisk 3D jest tworzony i dodawany do strony internetowej za pośrednictwem stylizacji CSS.

Tworzenie przycisku 3D za pomocą CSS

Dodajmy prosty przykład tworzenia przycisku 3D w HTML za pomocą właściwości stylizacji CSS. Zacznij od utworzenia znacznika kotwicy z atrybutem HREF równym „JavaScript: void (0)„Funkcja, aby utworzyć prosty przycisk klikalności:

= "javascript: void (0);"> kliknij tutaj!

Utworzony znacznik ma atrybut HREF zawierający „JavaScript: void (0)”Funkcja. Ta funkcja zmienia kształt kursora, gdy jest wskazany na przycisk. Pomiędzy tagami kotwiczącymi otwierającymi i zamykania jest tekst wyświetlany na przycisku ”Kliknij tutaj".

Teraz konieczne jest stylizowanie prostego przycisku za pomocą właściwości stylizacji CSS, aby utworzyć trójwymiarowy wyświetlacz:

Dodaj niektóre właściwości dekoracji tekstu, aby tekst był wyświetlany na przycisku:

Kolor: RGB (236, 234, 234);
Dekoracja tekstu: Brak;
kolor tła: RGB (165, 16, 133);
Font-Family: Georgia, „Times New Roman”, Times, Serif;
Rozmiar czcionki: 3em;
Blok wyświetlacza;

Następnie dodaj trochę „Zestaw internetowy”Właściwości, aby dodać efekty cienia i promień do przycisku:

-Webkit-Border-Radius: 9px;
-WebKit-Box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-box-shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);

Przycisk należy również ozdobić w odniesieniu do jego obszaru, marginesu i wyściółki itp

Margines: 100px auto;
Szerokość: 160px;
Text-Align: Center;
Wyściółka: 4px;

Aby dodać efekty cienia do przycisku, gdy jest aktywny lub klikany, istnieje CSS ”:aktywny„Selektor:

A: Active
-WebKit-Box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-box-shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Box-shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0, .9);
Pozycja: względny;
TOP: 7px;

Kompletny fragment kodu do tworzenia przycisku jest następujący:

Kolor: RGB (236, 234, 234);
Dekoracja tekstu: Brak;
kolor tła: RGB (165, 16, 133);
Font-Family: Georgia, „Times New Roman”, Times, Serif;
Rozmiar czcionki: 3em;
Blok wyświetlacza;
Wyściółka: 4px;
-Webkit-Border-Radius: 9px;
-WebKit-Box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-box-shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);
Margines: 100px auto;
Szerokość: 160px;
Text-Align: Center;
A: Active
-WebKit-Box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-box-shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Box-shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0, .9);
Pozycja: względny;
TOP: 7px;

Po uruchomieniu powyższego kodu następujące będą wyjście:

To podsumowuje metodę utworzenia przycisku 3D za pomocą CSS.

Wniosek

Wykonanie przycisku 3D za pośrednictwem właściwości stylizacji CSS wymaga najpierw utworzenia prostego przycisku za pomocą znacznika HTML, a następnie zastosowania właściwości zestawu Web CSS wraz z innymi właściwościami odnoszącymi się do znacznika HTML, przez który utworzono przycisk. To sprawia, że ​​przycisk wygląda trójwymiarowy. Aby dodać efekty do przycisku dla instancji, gdy przycisk jest klikany lub aktywny, użyj aktywnego selektora CSS.