Wybrałem kilka przycisków CSS, które moim zdaniem mogą być używane w projektach internetowych.

Generator przycisków CSS3

Spójrz na generator Przyciski CSS3 autorstwa Sanwebe:

Różowy przycisk CSS3 z czcionką Pacifico

ładny różowy guzik ( oprócz małego kodu jQuery do odtwarzania muzyki i zmiany tekstu wewnętrznego) jest całkowicie oparty na CSS3 :

Kolekcja przycisków 3D

Zbiór przycisków 3D utworzonych za pomocą CSS3:

Przyciski społecznościowe 3D

Świetne przyciski społecznościowe wykonane z CSS3 i czcionką ikon:

Animowane przyciski CSS3

Animowane przyciski CSS z wzorami tła. Może nie działać w przeglądarkach Firefox 3.6 i IE10:

Okrągłe animowane przyciski CSS3

Oto kilka animowanych przycisków, w których obracanie tekstu po najechaniu kursorem daje naprawdę przyciągający wzrok efekt:

Przyciski czyste kółka

Oto kolejny przykład okrągłych przycisków CSS3:

Przyciski przełączania CSS3

Dobrze zrobione przyciski radiowe utworzone za pomocą CSS3 i czcionki ikon:

Animowany przycisk CSS3

Uroczy przycisk 3D stworzony za pomocą CSS3 i Google Fonts:

Efekty przycisków CSS3

Te przyciski pokazują animacje wykorzystujące różne właściwości CSS3:

Błyszczące przyciski CSS3

Teraz możesz być absolutnie pewien, że błyszczące przyciski można łatwo utworzyć za pomocą CSS3, koniec z Photoshopem:

Przyciski 3D CSS3

To niesamowite, co można zrobić z pseudoelementami CSS3:before i :after. Sprawdź te niesamowite przyciski 3D:

Przełącznik CSS3

Przykład przycisku przełączania CSS3 bez JavaScript:

3d efekt przycisku klapki

Efekt 3D flip button stworzony za pomocą CSS3:

markowe guziki

Piękne przyciski CSS popularnych marek wykorzystujące ikony bootstrap:

Ciemny okrągły przycisk

Okrągły przycisk używający jQuery, aby dać efekt upuszczenia po kliknięciu przycisku:

Przełącznik CSS3

Przełącznik utworzony za pomocą CSS3 :

Piękne płaskie guziki

Kolekcja płaskich przycisków CSS na każdą okazję, bez animacji i efektów:

Przyciski udostępniania społecznościowego

Bardziej atrakcyjna wersja przycisków dostęp publiczny ale brak funkcjonalności. Według dewelopera powinno działać w IE7+ :

Boże Narodzenie przycisk

Przycisk CSS Christmas wykorzystujący metodę data:urls do osadzenia obrazu bezpośrednio w dokumencie:

miękki przycisk

Okrągły błyszczący przycisk stworzony za pomocą CSS3:

Miękki przycisk

Przyciski używają tylko znaków Unicode, co pozwala na używanie czcionek tekstowych lub ikon:

Duże animowane przyciski CSS3 3D

Kolejny zestaw animowanych przycisków CSS 3D dla stron internetowych. Animacja odbywa się za pomocą właściwości animacji i klatek kluczowych:

Metalowe przyciski CSS3

Zbiór metalicznych przycisków CSS3, których znaki zostały utworzone przy użyciu czcionki pictos przy użyciu @font-face . Dla efektu metalicznego wykorzystano właściwości box-shadow i linear-gradient:

Okrągłe przyciski CSS3

Kolejna kolekcja okrągłych animowanych przycisków CSS3:

Klikalne przyciski mediów społecznościowych CSS3

Przyciski używają prostych właściwości CSS3, takich jak gradienty , box-shadows , text-shadows i tak dalej. Ten zestaw zawiera również stany oczekujące i aktywne:

Proste przyciski CSS3

Ładne przyciski CSS:

trójwymiarowy przycisk pobierania

Ten przycisk 3D wykorzystuje transformację perspektywy. Działa tylko w przeglądarkach opartych na webkitach:

Uderzające przyciski mediów społecznościowych CSS3

duży przycisk

Solidny błyszczący przycisk CSS3 z efektem cienia na dole. Przycisk używa czcionki o nazwie Sansita One z Google Collection:

Proste przyciski

Kilka prostych przycisków CSS:

Przyciski mediów społecznościowych CSS3

Proste przyciski CSS

Zestaw prostych przycisków CSS. Są łatwe w konfiguracji i obsłudze. Można je łatwo zintegrować z Font-Awesome lub inną biblioteką:

Guziki w formie żetonu do pokera

Przykład prostego przycisku z żetonami pokerowymi. Może być również używany jako przycisk najechania:

przycisk suwaka

Pojęcie Suwak Przycisk CSS:

Przyciski menu administratora

Panel administratora ( menu lub nawigacja) przy użyciu CSS3 i frameworku fontawesome. Podczas przełączania do przycisku aktywna klasa jest dodawana za pomocą jQuery :

Naszywany guzik

Prosty przycisk z linią, która pokazuje moc CSS3 bez użycia obrazu tła:

Przycisk obrotowy

Okrągły przycisk z obracającą się ramką wskazujący najechanie myszą:

Przycisk CSS3

Soft button stworzony w CSS3 na podstawie tego przykładu:

Przycisk wyskakującej karty CSS3

Te przyciski CSS wyglądają jak karty wysuwające się z rękawa. Mogą służyć do wyświetlania informacji, które powinny być ukryte, dopóki użytkownik nie dokona wyboru:

Cukierkowy przycisk CSS3 Animacja

Animowany przycisk pokazujący stan pobierania:

Przyciski radiowe CSS3

Ładne przyciski radiowe, które używają jQuery do przełączania klasy:

Błyszczące przyciski

Zestaw pięknych przycisków na stronie CSS. Aby nadać błyszczący wygląd 3D, stosuje się różne właściwości:

Każdego dnia nowe standardy css3 i html5 są coraz głębiej osadzone w życiu projektantów layoutów i twórców stron internetowych, a przeglądarki z każdym dniem stają się coraz bardziej kompatybilne z tymi standardami.

W związku z tym wydarzeniem chciałbym przedstawić Wam wybór 10 przycisków css3, które mogą ułatwić Ci życie przy tworzeniu layoutu i tworzenie stron internetowych Aplikacje.

1. Super niesamowite przyciski.

Ten zestaw przycisków wykorzystuje zestaw CSS3 i kolorystykę RGBA.

Dodanie tego zestawu przycisków do Twojej strony nie jest trudne, musisz się połączyć szablon css i dodaj niezbędne klasy do linków, aby zmienić ich kolor, kształt itp.

Przykład połączenia:

Super niesamowity przycisk » Niesamowity niebieski przycisk » Niesamowity Magenta Przycisk » Niesamowity czerwony przycisk » Niesamowity pomarańczowy przycisk » Niesamowity żółty przycisk »

2. Przyciski Google.

Te przyciski zostały oparte na Strona główna Google.pl. Są też proste i minimalistyczne.

Przykład połączenia:

Wyszukaj w Google czuję się szczęśliwy

3. Przyciski gradientowe CSS3.

Przyciski są bardzo podobne do wspomnianych powyżej Super Awesome Buttons. Zestaw ten prezentowany jest w kilku kolorach (9 kolorów) i różnych kształtach.

Przykład połączenia:

Prostokąt lub zaokrąglony może być średni lub mały Etykieta przycisku Zakres

H3

4. Przycisk CSS3 Kick-Ass.

Ten przycisk nie jest najciekawszy z punktu widzenia designu, ale pod poniższym linkiem możesz obejrzeć film instruktażowy na temat tworzenia takich przycisków, co przyda się początkującym web developerom.

5. Czyste ikony mediów społecznościowych CSS.

Ten zestaw to zestaw ikon portale społecznościowe niż przyciski. Zestaw reprezentuje dziesięć ikon sieci społecznościowych, w tym Facebook, Twitter, Flickr i inne.

Przykład połączenia:

• Facebook
• Świergot
• RSS
• Flickr
• Pyszne
• LinkedIn
• Google
• Orkut
• Technorati
• NetVibes

6. Niezwykle fantazyjne przyciski CSS3.

Wszyscy posiadacze urządzeń z systemem iOS z pewnością rozpoznają te przyciski, podobne przyciski były obecne w urządzeniach z systemem iOS od pierwszych wersji. Przyciski te, podobnie jak wiele prezentowanych tutaj, mają ustawienia koloru, rozmiaru i są wykonane w czystym css3.

Przykład połączenia:

Poczta

7. Bonbon: Słodkie przyciski CSS3.

Czy jesteś naturalną słodyczą? W takim razie te przyciski są dla Ciebie. Są one wykonane w taki sposób, że chcesz je po prostu zjeść lub ewentualnie wykorzystać w swoim projekcie. Różne kolory, kształty, stany na pewno Ci się spodobają.

Przykład połączenia:

etykieta

8. Realistycznie wyglądające przyciski CSS3

Na uwagę niewątpliwie zasługuje ciekawy zestaw guzików, surowa kolorystyka, zaokrąglenia.

Przykład połączenia:

Popchnij

9. Proste przyciski CSS3 Github.

Widzieliście już wcześniej implementację takich przycisków na github.com, są bardzo łatwe w instalacji, wygodne i minimalistyczne. Możliwe jest również dodawanie ikon do przycisków.

Przykład połączenia:

To jest przycisk To jest przycisk pigułki Podziel przez zero

10. Elastyczne przyciski przełączania CSS3.

Te przyciski CSS3 są bardzo ładne, ale niepraktyczne, ponieważ są zaimplementowane tylko z Obsługa Firefoksa Niestety inne przeglądarki nie są obsługiwane.

Przykład połączenia:

Vlad Merzhevich

Standardowe przyciski tworzone za pomocą tagu lub , oczywiście dobrze wyglądają, ale próba zmiany ich wyglądu za pomocą stylów prowadzi do fatalnych rezultatów. Przyciski to cześć dziesięcioletnich interfejsów dzięki ich kanciastości (rys. 1). Oczywiście ta metamorfoza występuje tylko podczas korzystania z właściwości tła i obramowania, innymi słowy nie można zmienić koloru tła przycisku i obramowania wokół niego.

Ryż. 1. Oryginalny i zmodyfikowany przycisk

Obrazy mogą być użyte do drastycznej zmiany wyglądu przycisku, ale w porównaniu z możliwościami CSS 3 ta opcja wydaje się teraz rodzima.

Jako podstawy użyję oryginalnego przycisku w przeglądarce, który zawiera liniowy gradient pionowy i zaokrąglone krawędzie.

Najłatwiej jest zaokrąglić rogi, do czego używamy właściwości border-radius, ustawiając ją na żądany promień zaokrąglenia. Jak zwykle nie działa we wszystkich przeglądarkach, więc będziesz musiał dodać cały zestaw. Wynik jest następujący.

moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */

Rodzaj przycisków w różne przeglądarki pokazano na ryc. 2.

Ryż. 2. Guziki z zaokrąglonymi rogami

Ogólnie rzecz biorąc, oczekuje się wszystkiego. Starsze wersje IE nie obsługują CSS 3, reszta poprawnie renderuje narożniki, których potrzebuję. Z jakiegoś powodu Opera domyślnie nie wyświetla tła, jak robią to inne przeglądarki, ale nadal będzie specjalna dyskusja na temat Opery.

Teraz zabawna część, tworzenie pionowego gradientu liniowego. W tym celu ponownie zostaną użyte indywidualne style dla każdej przeglądarki.

tło: -moz-linear-gradient(#00BBD6, #EBFFFF);

Gradient określa punkt początkowy, kąt gradientu, kolor początkowy i kolor końcowy. W naszym przypadku, gdy gradient przechodzi w pionie z góry na dół, wystarczy ustawić tylko kolory, reszta parametrów jest używana domyślnie.

Chrome, Safari

tło: -webkit-gradient(liniowy, 0 0, 0 100%, od(#00BBD6), do(#EBFFFF));

Określa typ gradientu (liniowy), punkt początkowy zastosowania gradientu (lewy górny róg), punkt końcowy (lewy dolny róg) oraz kolor początkowy i końcowy.

Internet Explorer

filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");

Przeglądarka IE idzie własną drogą i dla różne efekty stosuje właściwość filtra, w tym dla gradientu. Tutaj wszystko jest bardziej trywialne, zapisywany jest tylko początkowy i końcowy kolor gradientu.

Opera odpoczywa, nie zaimplementowano jeszcze w niej gradientów.

Zestawienie wszystkich właściwości przeglądarek, narożników i gradientów (przykład 1).

Przykład 1. Przyciski z gradient liniowy

Przycisk źródła

Nowy przycisk

Wyszło całkiem ładnie (rys. 3), ale są też oczywiste różnice w stosunku do oryginalnego przycisku - wygląda płasko, jak deska.

Ryż. 3. Widok przycisków z gradientem

Możesz ponownie zrobić przycisk o pożądanym kształcie z gradientem, „bawiąc się” kolorami. Dwie wartości gradientu już nie wystarczą, na szczęście Firefox i Safari oferują rozwiązanie.

tło: -moz-liniowy-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

Zamiast dwóch wartości wstawiamy żądaną liczbę kolorów, gradient płynnie przejdzie z jednego koloru na drugi.

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

Parametr color-stop określa punkt, w którym zostanie zastosowany nowy kolor. Wartość mieści się w zakresie od 0 do 1.

Przykład 2: Przyciski z ulepszonym gradientem

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Przycisk źródła

Nowy przycisk

Wynik przykładu pokazano na ryc. 4.

Ryż. 4. Gradient, jakiego rodzaju gradientu potrzebujesz

Podobnie możesz utworzyć dowolne inne gradienty na przycisku lub innym elemencie (rys. 5). Ale już zrób to sam, za co dodałem do warsztatu.

Ryż. 5. Takie różne przyciski

Pozwólcie, że podsumuję. Możesz zrobić przycisk z gradientem i zaokrąglonymi rogami bez obrazów. Jednak z przeglądarkami, zamieszaniem i zawrotami głowy. Opera w ogóle nie wie, jak pracować z gradientami, w IE 9 występuje nieprzyjemny błąd podczas łączenia gradientu z narożnikami (rys. 6).

Ryż. 6. Nakładka narożna w IE 9

Cóż, podczas gdy będziemy robić „ładne rzeczy” dla Przeglądarki Firefox, Safari i Chrome.

Zanim zajmiemy się przyciskami, spójrzmy na ustawienia wspólne dla nich wszystkich.

HTML

Przyciski będą używać bardzo prostego kodu HTML:

Subskrybuj

css

Ponadto wszystkie przyciski będą miały wspólne ustawienia tekstu napisu i odznaczenia linków:

ButtonText ( czcionka: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )

Zazwyczaj użytkownik oczekuje dość łagodnego efektu po najechaniu myszą na łącze lub przycisk. A w naszym przypadku przycisk zmienia rozmiar - zwiększa się, pokazując dodatkowy komunikat.

Główny kod CSS

Na początek musimy tylko nadać przyciskowi kształt i kolor. Zdefiniuj wysokość 28px i szerokość 115px, dodaj marginesy i dopełnienie oraz nadaj przyciskowi jasną ramkę.

#button1 ( tło: #6292c2; obramowanie: 2px stałe #eee; wysokość: 28px; szerokość: 115px; margines: 50px 0 0 50px; dopełnienie: 0 0 0 7px; przepełnienie: ukryte; wyświetlacz: blok; )

Efekty CSS3

Niektórzy lubią, gdy prostemu przyciskowi towarzyszy całkiem sporo kodu CSS. W ta sekcja zapewnia dodatkowe style CSS3 dla naszego przycisku. Możesz się bez nich obejść, ale nadają przyciskowi bardziej nowoczesny wygląd.

Zaokrąglij rogi ramki i dodaj gradient. Oto mała sztuczka z ciemnym gradientem, która działa z dowolnym kolorem tła.

/*Zaokrąglone rogi*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; promień obramowania: 15px; /*Gradient*/ obraz w tle: -webkit-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -moz-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -o-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -ms-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: liniowy-gradient (góra, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2));

Animacja CSS

Ustawmy teraz przejście CSS. Animacja zostanie wykorzystana do wszelkich zmian właściwości i potrwa pół sekundy.

Najechanie myszką

Pozostaje tylko dodać styl, aby rozwinąć przycisk po najechaniu na niego myszą. Aby wyświetlić cały post, przycisk musi mieć szerokość 230 pikseli.

#button1:najechanie (szerokość: 230px; )

Łatwa zmiana odcienia koloru

Bardzo prosty i popularny efekt CSS dla przycisku. Podczas przesuwania kursora myszy płynnie zmienia się ton koloru tła.

Główny kod CSS

Kod CSS jest bardzo podobny do poprzedniego przykładu. Używany jest inny kolor tła, a kształt jest nieznacznie modyfikowany. Tekst jest również wyśrodkowany, a wysokość linii przycisku jest ustawiona tak, aby był wyśrodkowany w pionie.

#button2 ( background: #d11717; border: 2px solid #eee; wysokość: 38px; width: 125px; margin: 50px 0 0 50px; overflow: ukryty; display: block; text-align: center; line-height: 38px; )

Efekty CSS3

Ustaw zaokrąglenie rogów, gradient tła i dodatkowy cień. Używając rgba, sprawiamy, że cień jest czarny i przezroczysty.

/*Zaokrąglone rogi*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; promień obramowania: 10px /*Gradient*/ obraz w tle: -webkit-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -moz-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -o-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -ms-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: liniowy-gradient (góra, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2)); /*Cień*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2);

Animacja CSS

Animacja jest praktycznie taka sama jak w poprzednim przykładzie.

/*Przejście*/ -webkit-transition: Wszystkie 0.5s są łatwe; -moz-transition: Wszystkie 0.5s luzu; -o-transition: Wszystkie 0.5s luzu; -ms-transition: Wszystkie 0.5s luzu; przejście: wszystkie 0,5 s luzu;

Najechanie myszką

Po najechaniu kursorem myszy zostanie ustawiony inny kolor tła. Spróbuj wybrać jaśniejszą opcję kolorów w Photoshopie, aby uzyskać wspaniały efekt.

#button2:hover ( kolor tła: #ff3434; )

Ten efekt może być imponujący w zależności od wybranego obrazu tła. Demo wykorzystuje nieokreślone tło, a efekt wygląda nieokreślony. Spróbuj użyć innego obrazu, a możesz uzyskać oszałamiający efekt.

Główny kod CSS

Główna część kodu jest taka sama jak w poprzednich przykładach. Należy pamiętać, że używamy zdjęcie w tle. Początkowa pozycja tła jest ustawiona na „0 0”. Po najechaniu kursorem pozycja przesuwa się w pionie.

#button3 ( background: #d11717 url("bkg-1.jpg"); pozycja-tła: 0 0; cień tekstu: 0px 2px 0px rgba (0, 0, 0, 0,3); rozmiar czcionki: 22px; wysokość : 58px; szerokość: 155px; margines: 50px 0 0 50px; overflow: ukryty; display: block; text-align: center; line-height: 58px; )

Efekty CSS3

W tym przykładzie nie ma nic specjalnego - zaokrąglone rogi i cienie.

/*Zaokrąglone rogi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; promień obramowania: 5px /*Cień*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba (0, 0, 0, 0,2);

Animacja CSS

Animacja w tym przypadku jest dłuższa, aby uzyskać płynny i ciekawy efekt.

/*Przejście*/ -webkit-transition: Wszystkie wersje 0.8s są łatwe; -moz-transition: Wszystkie 0.8s łatwość; -o-przejście: Wszystkie 0.8s łatwość; -ms-transition: Wszystkie 0.8s łatwość; przejście: wszystkie 0,8 s łatwość;

Najechanie myszką

Teraz nadszedł czas, aby przenieść obraz tła. Pozycja początkowa to „0 0”. Ustaw drugi parametr na 150px. Aby przesuwać się w poziomie, musisz zmienić pierwszy parametr.

#button3:hover ( pozycja tła: 0px 150px; )

Symulowane naciśnięcie przycisku 3D

Ostatni przykład w naszym samouczku skupia się na popularnej metodzie 3D symulowania naciśnięcia przycisku po najechaniu na niego myszą. Animacja w tym przypadku jest tak prosta, że ​​nie wymaga nawet przejścia CSS. Ale efekt końcowy jest imponujący.

Główny kod CSS

Kod CSS dla naszego przycisku.

#button4 ( background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); rozmiar czcionki: 22px; wysokość: 58px; szerokość: 155px; margines: 50px 0 0 50px; przepełnienie: ukryte ; display: block; text-align: center; line-height: 58px; )

Efekty CSS3

W tym przypadku CSS3 nie jest już dobrą opcją. Do uzyskania efektu wymagane są cienie i gradient. Twardy cień tworzy wygląd przycisku 3D.

/*Zaokrąglone rogi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; promień obramowania: 5px /*Cień*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba (0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba (0, 0, 0, 0,8); /*Gradient*/ obraz w tle: -webkit-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -moz-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -o-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: -ms-linear-gradient(góra, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); obraz w tle: liniowy-gradient (góra, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2));

Najechanie myszką

W tym przypadku mamy największą sekcję zawisu. Długość cienia jest skrócona, a marginesy tworzą mieszankę ciemnej strefy. Wszystko razem tworzy iluzję naciśnięcia przycisku. Odwracanie gradientu wzmacnia efekt.

#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba (0, 0, 0, 0.8); /*Gradient*/ obraz w tle: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); obraz w tle: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); obraz w tle: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); obraz w tle: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); obraz w tle: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )

Najpierw musisz pobrać kod źródłowy i wybrać motyw graficzny dla przycisków. Możesz wziąć projekt, który Ci się podoba. Weźmy jako przykład pierwszy motyw winony.

Pobierać

Powiązane artykuły na ten temat:

Otwórz plik w edytorze index.html ze źródła znajdujemy interesujący nas tag. W moim przypadku:

Z tego kodu bierzemy linię z klasą przycisk.

Kod wklejamy w dowolne potrzebne miejsce w pliku z kodem naszego projektu pomiędzy tagiem .
Zmień nazwę przycisku na dowolną potrzebną. W moim przypadku zmienię nazwę na „Otwórz”

Skopiuj go i wklej między tagami w pliku indeksowym twojego projektu.

Przykład pokazuje, że określony styl jest dodawany do przycisku za pomocą dodatkowej klasy odpowiadającej nazwie motywu projektu.

W naszym przypadku to jest klasa przycisk winona. W związku z tym zostaną dodane style o nazwie winona.

Jest to bardzo wygodne, ponieważ jeśli chcesz zmienić wygląd przycisków, wystarczy zmienić nazwę dodatkowej klasy w tagu . Style są już w pliku. button.css!

Powiązana zawartość:

1. Uruchomienie przeglądarki Google Chrome trwa zbyt długo
2. Co jest lepsze dla programisty?
3. Usuń aktualizacje nieużywanych aplikacji natywnych lub całkowicie je wyłącz
4. Gadżety pulpitu Windows to darmowy program dostępny do pobrania