Компоненты Кнопки Компонент брутализма Buttons

Компонент брутализма Buttons

Компонент кнопок с брутальным дизайном, с высокой насыщенностью цветов, адаптивной версткой и поддержкой темного режима, подходит для деловых и корпоративных сайтов.

Предварительный просмотр

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
    <div class="flex space-x-4">
        <button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
            Primary Action
        </button>
        <button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
            Secondary Action
        </button>
    </div>
    <div class="flex space-x-4 mt-6">
        <button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
            Tertiary Action
        </button>
        <button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
            Another Action
        </button>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
        <div class="flex items-center justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
        </div>
    </div>
</div>

Связанные компоненты

Компонент кнопок

Компонент Buttons с 3D-элементами и яркими цветами для интерфейсов социальных сетей, поддерживающий темную тему и адаптивный дизайн.

Открытый

Компонент кнопок

Компонент адаптивных кнопок с материальным дизайном, триадической цветовой схемой и поддержкой темных тем.

Открытый

Компонент кнопок

Компонент кнопок в стиле ретро/винтаж с отзывчивыми эффектами и поддержкой темных тем, призванный вызвать ностальгию по эстетике 80-х и 90-х годов.

Открытый