/* * LF Website Tools – Divi-Buttons. * Frontend: Klassen am (Modules\Buttons::classes()). * Admin-Vorschau: dieselben Klassen an .lf-wt-btn-demo, deshalb :is(body, .lf-wt-btn-demo). * Presets verändern nur transform, box-shadow, background-image und Animation. * Farben, Rahmen, Radius und Schrift bleiben Divi-Einstellungen. */ /* ------------------------------------------------------------------ * Hover-Icon ausblenden * Divi 5 blendet bei „Icon aus“ im Modul nichts aus. Modul-eigene Icon-Regeln * haben bis zu (1,3,2) + !important (body #page-container .et_pb_section * .et_pb_button_N:after), daher die zweite, spezifischere Zeile. * Hover-Padding auf Divis Normalwert, damit der Button nicht breiter wird. * ------------------------------------------------------------------ */ body.lf-wt-btn-no-icon .et_pb_button::after, body.lf-wt-btn-no-icon .et_pb_button::before, body.lf-wt-btn-no-icon #page-container .et_pb_section .et_pb_button.et_pb_button::after, body.lf-wt-btn-no-icon #page-container .et_pb_section .et_pb_button.et_pb_button::before { display: none !important; } body.lf-wt-btn-no-icon .et_pb_button:hover, body.lf-wt-btn-no-icon .et_pb_module .et_pb_button:hover { padding: 0.3em 1em; } /* ------------------------------------------------------------------ * Hover-Presets * Hover nur auf Geräten mit echtem Hover (sonst „klebt“ der Effekt nach dem * Tippen), Tastatur-Fokus überall. * ------------------------------------------------------------------ */ /* Anheben */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-lift .et_pb_button:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35); } /* Vergrößern */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-grow .et_pb_button:focus-visible { transform: scale(1.05); } /* Eindrücken */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-press .et_pb_button:focus-visible { transform: scale(0.96); } /* Schatten */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-shadow .et_pb_button:focus-visible { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08); } /* Glanz: Lichtstreifen über der Divi-Hintergrundfarbe */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-shine .et_pb_button { background-image: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%, transparent 100%); background-size: 250% 100%; background-position: 100% 0; background-repeat: no-repeat; transition-duration: 0.6s; } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-shine .et_pb_button:focus-visible { background-position: 0 0; } /* Puls: ein Ring läuft einmal nach außen */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-pulse .et_pb_button:focus-visible { animation: lf-wt-btn-pulse 0.6s ease-out 1; } /* Aufhellen */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-brighten .et_pb_button:focus-visible { filter: brightness(1.12); } /* Kontur: Rahmen mit Abstand */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-outline .et_pb_button:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 3px; } /* Unterstreichen */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-underline .et_pb_button:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } /* Wippen: hüpft einmal kurz */ :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-bounce .et_pb_button:focus-visible { animation: lf-wt-btn-bounce 0.5s ease-out 1; } @keyframes lf-wt-btn-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 75% { transform: translateY(-2px); } } @keyframes lf-wt-btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); } 100% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); } } @media (hover: hover) { :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-lift .et_pb_button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35); } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-grow .et_pb_button:hover { transform: scale(1.05); } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-press .et_pb_button:hover { transform: scale(0.96); } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-shadow .et_pb_button:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08); } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-shine .et_pb_button:hover { background-position: 0 0; } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-pulse .et_pb_button:hover { animation: lf-wt-btn-pulse 0.6s ease-out 1; } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-brighten .et_pb_button:hover { filter: brightness(1.12); } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-outline .et_pb_button:hover { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 3px; } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-underline .et_pb_button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } :is(body, .lf-wt-btn-demo).lf-wt-btn-fx-bounce .et_pb_button:hover { animation: lf-wt-btn-bounce 0.5s ease-out 1; } } /* ------------------------------------------------------------------ * Gestaltungsvorlagen (Form und Tiefe, ohne Farben) * Radius: Spezifität (1,4,1), überstimmt Divis Modulwerte * (body #page-container .et_pb_section .et_pb_button_N = 1,3,1). * Schatten: bewusst niedriger (0,3,0), damit Hover-Presets mit Schatten * beim Hover übernehmen. * ------------------------------------------------------------------ */ :is(body.lf-wt-btn-style-pill #page-container .et_pb_section, .lf-wt-btn-demo.lf-wt-btn-style-pill) .et_pb_button.et_pb_button { border-radius: 999px; } :is(body.lf-wt-btn-style-square #page-container .et_pb_section, .lf-wt-btn-demo.lf-wt-btn-style-square) .et_pb_button.et_pb_button { border-radius: 0; } :is(body, .lf-wt-btn-demo).lf-wt-btn-style-raised .et_pb_button { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); } :is(body, .lf-wt-btn-demo).lf-wt-btn-style-raised .et_pb_button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } :is(body, .lf-wt-btn-demo).lf-wt-btn-style-hard-shadow .et_pb_button { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85); } :is(body, .lf-wt-btn-demo).lf-wt-btn-style-hard-shadow .et_pb_button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85); } :is(body, .lf-wt-btn-demo).lf-wt-btn-style-soft-shadow .et_pb_button { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); } /* „Bewegung reduzieren“: keine Bewegung, Schatten bleibt als ruhiges Feedback. */ @media (prefers-reduced-motion: reduce) { :is(body, .lf-wt-btn-demo)[class*="lf-wt-btn-fx-"] .et_pb_button, :is(body, .lf-wt-btn-demo)[class*="lf-wt-btn-fx-"] .et_pb_button:hover, :is(body, .lf-wt-btn-demo)[class*="lf-wt-btn-fx-"] .et_pb_button:focus-visible { transform: none; animation: none; transition-duration: 0s; } }