Как сделать округлую 3D-кнопку (с видимыми правой и нижней сторонами) с использованием Tailwind CSS?

<script src="https://cdn.tailwindcss.com"></script>

<button class="relative inline-block rounded-lg text-black align-middle no-underline transition-all duration-[0.5s] bg-white px-10 py-5 before:rounded-b-lg before:bottom-[-15px] before:h-[15px] before:w-full before:skew-x-[45deg] before:bg-[#036e15] before:left-2 after:rounded-r-lg after:right-[-15px] after:h-full after:w-[15px] after:skew-y-[45deg] after:bg-[#01370a] after:-bottom-2 active:ml-2.5 active:mt-2.5 active:before:bottom-[-5px] active:before:h-[5px] active:before:left-[3px] active:after:right-[-5px] active:after:w-[5px] active:after:bottom-[-3px] before:absolute before:content-[''] before:transition-all before:duration-[0.5s] after:absolute after:content-[''] after:transition-all after:duration-[0.5s]">
        Нажми на меня!
</button>

Ответ

Чтобы создать округлую 3D-кнопку с видимыми правой и нижней сторонами, используя Tailwind CSS, можно внести несколько изменений в вашу исходную разметку и стили. Я объясню текущие проблемы и предложу исправленную версию кода.

Проблемы в вашем коде

1. Смещение элементов before и after: Положение элементов для создания тени не совсем правильно настроено, что приводит к несовпадению теней с основной кнопкой.
2. Логика переходов: Переходы для состояний кнопки могут не давать ожидаемого эффекта, если они настроены неправильно.

Исправленный код

Вот обновленный код для вашей кнопки:

<script src="https://cdn.tailwindcss.com"></script>

<button class="relative inline-block rounded-lg text-black bg-white px-10 py-5 shadow-md transition-all duration-300 active:translate-y-1 active:shadow-lg">
    <span class="relative z-10">Press me!</span>
    <span class="absolute top-0 left-0 right-0 bottom-0 rounded-lg bg-[#036e15] transform skew-y-3 -translate-y-1 -translate-x-1"></span>
    <span class="absolute top-0 right-0 bottom-0 rounded-lg bg-[#01370a] transform skew-x-3 -translate-y-1 translate-x-1"></span>
</button>

Объяснение изменений

1. Создание фона: Я добавил два дополнительных элемента span, которые будут создавать эффект тени. Один элемент (bg-[#036e15]) искажён по оси Y для создания нижней теневой стороны, а другой (bg-[#01370a]) искажён по оси X для правой стороны.
2. Классы трансформации: Классы transform, skew-y-3, и skew-x-3 используются для создания наклона, что усиливает эффект глубины.
3. Изменение стилей при нажатии: Используется active:translate-y-1 для того, чтобы кнопка немного перемещалась вниз при нажатии, создавая эффект нажатия.
4. Переходы: Настроен duration-300 для плавных анимаций.

Примечания

• Вы можете настроить цвета и размеры в соответствии с вашими требованиями.
• Убедитесь, что Tailwind CSS правильно подключен, чтобы стили применялись корректно.

Эти изменения помогут вам добиться желаемого эффекта 3D-кнопки с округлыми краями и видимыми тенями. Если у вас будут дополнительные вопросы или пожелания, не стесняйтесь их задавать!