Studio designu - przyciski

Główne CTA - 6 propozycji

Wzorzec wzięty 1:1 z ozon-landing (/serwis, /czyszczenie): czterowarstwowy przycisk - cień, 3D bok, gradient na froncie, skośny shine przebiegający przez button + delikatne pulsowanie outline. Zaokrąglenie 12 px, jak karty produktu. Wybierz odcień, zastosuję go w PDP, drawerze koszyka i checkoucie.

Wybór: neon lime - wersje płaskie

Bez głębi 3D

Zwykły przycisk, gradient + 12 px zaokrąglenie. Cztery warianty wykończenia - od najczystszego po taki z subtelnym shine i pulsem. Wybierz, który ma trafić do produkcji.

Dodaj do koszyka

A. Czysty - tylko gradient. Hover lekko jaśnieje i unosi się o 1 px. Najmniej rozpraszający.

Dodaj do koszyka

B. Z miękkim cieniem - delikatny drop shadow, żeby przycisk „odlepił się" od tła bez 3D efektu.

Dodaj do koszyka

C. Cień + shine - przebiegający shine zostaje, ale bez 3D boku. Mój faworyt: efekt życia bez fizycznej głębi.

Dodaj do koszyka

D. Cień + shine + puls - dodatkowo lekko pulsuje. Mocniejszy CTA, ale na sklepie z wieloma produktami łatwo o przesyt - rezerwowałbym dla checkoutu.

Mały

sm - 44 px, inline w karcie

Standard

md - 56 px, domyślny

Duży

lg - 64 px, finalny CTA

Reszta dla porównania

Wersje 3D + inne odcienie

Neon lime

#52f64e

Twoja propozycja - bardzo świeży, neonowy zielony. Wybija się z białego layoutu, ale w dużych blokach może wyglądać jaskrawo. Eko/sport vibe.

Dodaj do koszyka

PDP - karta produktu

Przejdź do kasy

Drawer koszyka i /koszyk

Zapłać 124,90 zł

Checkout - finalny CTA

Mały

sm - inline w karcie

Duży

lg - finalny CTA na checkoucie

Klasyczna zieleń

#17bb47

Dokładnie ten sam odcień co przyciski w ozon-landing /serwis i /czyszczenie. Sprawdzony pod konwersję, kup-teraz feel, ufny.

Dodaj do koszyka

PDP - karta produktu

Przejdź do kasy

Drawer koszyka i /koszyk

Zapłać 124,90 zł

Checkout - finalny CTA

Mały

sm - inline w karcie

Duży

lg - finalny CTA na checkoucie

Stonowana zieleń

#22c55e

Pomiędzy lime a klasyczną - chłodniejsza, bardziej premium. Pasuje do beżowo-białego layoutu sklepu bez krzyczenia.

Dodaj do koszyka

PDP - karta produktu

Przejdź do kasy

Drawer koszyka i /koszyk

Zapłać 124,90 zł

Checkout - finalny CTA

Mały

sm - inline w karcie

Duży

lg - finalny CTA na checkoucie

Marka Robertozon

#b72e35

Ten sam czerwony co pasek darmowej dostawy w nagłówku. Spójność z aktualną tożsamością. Bardziej akcja niż kup.

Dodaj do koszyka

PDP - karta produktu

Przejdź do kasy

Drawer koszyka i /koszyk

Zapłać 124,90 zł

Checkout - finalny CTA

Mały

sm - inline w karcie

Duży

lg - finalny CTA na checkoucie

Bursztyn

#f59e0b

Ciepły, garażowy akcent - kojarzy się z pracą warsztatu. Kontrast wobec niebiesko-szarego layoutu. Może być per-CTA (np. tylko ATC).

Dodaj do koszyka

PDP - karta produktu

Przejdź do kasy

Drawer koszyka i /koszyk

Zapłać 124,90 zł

Checkout - finalny CTA

Mały

sm - inline w karcie

Duży

lg - finalny CTA na checkoucie

Obsydian

#0f172a

Premium, anti-CTA. Do ciemnych layoutów lub jako secondary. Aktualny styl ATC w sklepie, ale z 3D + shine.

Dodaj do koszyka

PDP - karta produktu

Przejdź do kasy

Drawer koszyka i /koszyk

Zapłać 124,90 zł

Checkout - finalny CTA

Mały

sm - inline w karcie

Duży

lg - finalny CTA na checkoucie

Detale techniczne

Warstwy: outer pulse (animacja box-shadow) → cień offset 6 px → 3D bok offset 4 px (gradient ciemniejszy) → front z gradientem + inset highlight + skewowany shine 3.2s loop.
Hover: face podnosi się o 3 px (translateY) - odsłania się 3D bok i cień pod spodem.
Active: face „dociska się" o 1 px - taktylny feel.
Promień: 12 px (rounded-xl) - dopasowane do rounded-lg karty produktu.
Pulsowanie: mocno stłumione vs ozon-landing - w sklepie nie ma jednego głównego CTA na stronie, więc nie chcemy, żeby każdy klikalny element miażdżył wzrok.

Główne CTA - 6 propozycji

Detale techniczne

Warstwy: outer pulse (animacja box-shadow) → cień offset 6 px → 3D bok offset 4 px (gradient ciemniejszy) → front z gradientem + inset highlight + skewowany shine 3.2s loop.

Hover: face podnosi się o 3 px (translateY) - odsłania się 3D bok i cień pod spodem.

Active: face „dociska się" o 1 px - taktylny feel.

Promień: 12 px (rounded-xl) - dopasowane do rounded-lg karty produktu.

Pulsowanie: mocno stłumione vs ozon-landing - w sklepie nie ma jednego głównego CTA na stronie, więc nie chcemy, żeby każdy klikalny element miażdżył wzrok.