Podstawowy

Zobacz ofertę

Z ikoną

Więcej o nas

Na ciemnym tle

Kontakt
← Repozytorium modułów

Przycisk skośny — btn-bok

Moduł Divi: Przycisk
Klasa: btn-bok → Zaawansowane › Identyfikatory i klasy CSS › Klasa CSS
Warianty: podstawowy · z ikoną · na ciemnym tle

Jak przenieść na inną stronę

  1. Skopiuj sekcję z modułem (prawy klik na sekcji › Kopiuj) i wklej na docelowej stronie, albo zapisz ją do Biblioteki Divi.
  2. Skopiuj moduł Kod z tej strony i wklej na docelowej stronie — w nim siedzi cały CSS, więc moduł działa od razu.
  3. Gdy moduł zostaje na stałe: przenieś CSS z modułu Kod do arkusza motywu, a moduł Kod skasuj.

Ustawienia w Divi

  • Tło: #f0c609  ·  Tekst: #FFFFFF  ·  Obramowanie: 0px, promień 0px
  • Dopełnienie: 15px | 40px | 15px | 40px  ·  Odstęp liter: 1px
  • Hover: tło #FFFFFF, tekst #f0c609 — ustawiane w Divi, nie w CSS
  • Ikona: Style › Tekst przycisku › Wyświetl ikonę. Żeby ikona była zawsze widoczna, wyłącz „Pokaż tylko po najechaniu”.

Pułapki i uwagi

  • Skos robi clip-path w pikselach, nie w procentach. Na procentach kąt zmieniał się zależnie od długości napisu.
  • Cień na hover musi siedzieć na wrapperze .et_pb_button_module_wrapper. Nałożony na sam przycisk nie działa, bo clip-path przycina go razem z kształtem.
  • Selektor zaczyna się od html body — bez tego Divi wygrywa specyficznością.
  • Nie ustawiaj w Divi animacji przesunięcia na hover — przycisk zaczyna „podskakiwać” i zmieniać rozmiar.

Kod CSS — do skopiowania

/* =====================================================
   PRZYCISK BTN-BOK — parallelogram z cieniem na hover
   ===================================================== */

/* Kształt + transition */
html body .btn-bok {
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%) !important;
  -webkit-clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%) !important;
  transition: filter 0.3s ease !important;
}

/* Cień na hover — na WRAPPERZE Divi, nie na przycisku (kluczowe) */
.et_pb_button_module_wrapper:has(.btn-bok) {
  display: inline-block;
  transition: filter 0.3s ease;
}

.et_pb_button_module_wrapper:has(.btn-bok:hover) {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

Ten sam kod jest w module Kod poniżej (etykieta „CSS modułu”) — dlatego moduł działa na tej stronie samodzielnie. Drugi moduł Kod odpowiada tylko za wygląd tego opisu i nie należy go kopiować.

← Repozytorium modułów