Buttony w kształcie koła z animacją obrotu w CSS3


30 października 2012 / Michał Kortas


Dzisiejszy, wieczorny wpis poświęcony będzie również pojęciu webdesignu, a ściślej – możliwościom tworzenia różnorodnych elementów na stronach internetowych tylko i wyłącznie za pomocą języka CSS3. Dlaczego skupiamy się na samej stronie technicznej, pomijając elementy graficzne? Odpowiedź jest prosta i kilka argumentów już teraz stoi murem za akceptacją tego typu rozwiązań. Po pierwsze „odchudzamy” nasze witryny – ukłon ten szczególnie tyczy się do urządzeń mobilnych. Po drugie – po co za każdym razem odpalać program graficzny, żmudnie edytować pliki z użytymi obrazkami i ponownie wgrywać je na serwer? Korzystając z CSS3 będziemy zmuszeni, w przypadku zmian, do edycji zazwyczaj kilku-kilkunastu linijek kodu. W tym krótkim tutorialu pokażę Wam, jak przygotować buttony w kształcie kół, które po najechaniu na nie kursorem myszy będą obracać się wokół swojego środka symetrii. A więc zaczynajmy!

Struktura buttonów w HTML

Jak zwykle, przygotujmy sobie uprzednio całą strukturę w formacie HTML.

Jakie mamy założenia? Nasze buttony mają wyświetlać nazwy kolorów, po najechaniu na nie kursorem powinny wykonać jeden obrót i dodatkowo – po nazwą główną ma pojawić się napis zachęcający do wyboru danego przycisku. Proste? No to przejdźmy teraz do arkusza CSS.

Formatowanie w arkuszu CSS

Gradientowe przejścia w tle

Na początek nadajmy kolory teł dla buttonów. Niech staną się dla nas widoczne. W tym celu pomogą nam wcześniej utworzone klasy. Zdecydowałem, że każdy background będzie miał przejście gradientowe, które po prostu wygląda dużo ładniej niż jednolita barwa.

Sporo kodu to tylko pozory. Deklaracje gradientów zajmują zawsze dużo miejsca.

Efekt, który otrzymaliśmy jest następujący.

Nadanie rozmiarów i owalnego kształtu

Nadszedł czas na ograniczenie wymiarów naszych buttonów. Oprócz tego dodamy im trochę web-designerskich ulepszeń.

Uzyskany efekt:

Formatowanie tekstu

Czas przygotować style dla tekstu zamieszczonego w buttonach. Uwidocznimy nazwę koloru, a ukryjemy napis namawiający do wyboru poszczególnych opcji.

I oczywiście pogląd zmian.

Akcja po aktywacji buttona

Zanim zajmiemy się animacją, dodajmy zwykłe efekty do pseudoklasy :hover.

Uzyskaliśmy płynny efekt pojawiania się cienia, oraz uwidocznienie się napisu namawiającego do kliknięcia.

Animacja obrotu w CSS3

Najciekawszy element do zaaplikowania czeka nas własnie w tej chwili. Dla wygody podałem deklaracje tylko dla przeglądarek z silnikiem Webkit. Oczywiście dla Opery (-o-) i Mozilli (-moz-) podajemy przedrostki, które wpisałem w nawiasach. Więcej o podstawach animacji przeczytacie w jednym z naszych poradników na wortalu > Podstawy animacji w CSS3.

Zakończenie

Efekt końcowy zobaczyć możecie, uruchamiając demo, do którego link umieściłem na samym dole artykułu. Na koniec podam Wam jeszcze pełen listing arkusza CSS.

Zobacz DEMO | Pobierz źródło



7 odpowiedzi na “Buttony w kształcie koła z animacją obrotu w CSS3”

  1. Ryuk pisze:

    Ten sam efekt używa strona http://prizesfrom.net/

  2. a czemu cień się też obraca?

  3. faxe pisze:

    Fajny bajer, ale w demo nie obracają się przyciski.

  4. fan pisze:

    bardzo fajny pomysł. niestety nie dziala na operze (12.12) i na IE 9

  5. Klaudyna pisze:

    Genialne! Długo tego szukałam.
    Po długich staraniach udało mi się i działa sprawnie.
    Moje zapytanie brzmi: co zrobić, aby zamiast tego kolorowego pola mógł być jakiś obrazek (deseń)?
    I jeszcze jedno. Po zmniejszeniu średnicy koła, tekst nie znajduje się na samym środku, odleglosc od dołu jest mniejsza niż odległosc jego od góry, co wygląda nieładnie. Jak moge temu zaradzić?
    Dziękuje za dodanie tak przydatnego postu i pozdrawiam! :))

Skomentuj Ryuk Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.