Уроки

Добавление стильного эффекта для кнопок на вашем сайте

Главная » Уроки » Добавление стильного эффекта для кнопок на вашем сайте

Для привлечения внимания и увеличения конверсий на всех кнопках вашего сайта можно создать динамический эффект переливания стекла.

Для этого необязательно редактировать все кнопки, достаточно знать общий CSS класс у ваших кнопок и добавить следующий сниппет в function.php вашей темы, либо в плагин Code Snippets.

function add_light_sweep_effect_to_buttons() {
    ?>
    <style>
        .et_pb_button {
            position: relative;
            overflow: hidden;
            z-index: 1;
            
        }

        .et_pb_button canvas.light-sweep {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
            mix-blend-mode: overlay;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.et_pb_button').forEach(button => {
                const canvas = document.createElement('canvas');
                canvas.className = 'light-sweep';
                button.appendChild(canvas);
                const ctx = canvas.getContext('2d');

                function resizeCanvas() {
                    canvas.width = button.offsetWidth;
                    canvas.height = button.offsetHeight;
                }

                resizeCanvas();
                window.addEventListener('resize', resizeCanvas);

                function drawSweep(timestamp) {
                    const width = canvas.width;
                    const height = canvas.height;
                    ctx.clearRect(0, 0, width, height);

                    const gradientWidth = 100;
                    const speed = 0.0015;
                    const t = (timestamp * speed) % 1.5;

                    const x = -gradientWidth + (width + gradientWidth) * t;
                    const y = -gradientWidth + (height + gradientWidth) * t;

                    const gradient = ctx.createLinearGradient(x, y, x + gradientWidth, y + gradientWidth);
                    gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
                    gradient.addColorStop(0.2, 'rgba(255, 255, 255, 0.05)');
                    gradient.addColorStop(0.5, 'rgba(200, 220, 255, 0.55)');
                    gradient.addColorStop(0.8, 'rgba(255, 255, 255, 0.05)');
                    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

                    ctx.filter = 'blur(2px)';
                    ctx.fillStyle = gradient;
                    ctx.fillRect(0, 0, width, height);

                    requestAnimationFrame(drawSweep);
                }

                requestAnimationFrame(drawSweep);
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_light_sweep_effect_to_buttons');

В данном случае общий класс у всех кнопок сайта et_pb_button, его мы и указываем в скрипте. Ваш класс вы можете посмотреть открыв консоль разработчика в браузере. Наведите мышку на кнопку, нажмите правой кнопкой мыши по кнопке и далее будет пункт «Посмотреть код».