Компоненты Кнопки «Поделиться» в социальных сетях Компонент кнопок "Поделиться" в социальных сетях

Компонент кнопок "Поделиться" в социальных сетях

Скевоморфный компонент кнопок социальных сетей, разработанный для веб-сайтов электронной коммерции, с цветовой схемой в оттенках серого и поддержкой темного режима.

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

HTML-код

<div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share via Email</span>
        </a>
    </div>
</div>

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

Компонент кнопок "Поделиться" в социальных сетях

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

Открытый

Компонент кнопок «Поделиться» в социальных сетях — музыка/аудио

Набор кнопок «Поделиться» в социальных сетях, предназначенный для музыкальных и аудиоплатформ, выполнен в стиле Material Design с приглушенными цветами и поддерживает темный режим. Включает кнопки для распространенных платформ обмена, таких как Facebook, Twitter и электронная почта.

Открытый

Компонент кнопок "Поделиться" в социальных сетях

Минималистичный компонент кнопок социальных сетей, разработанный с помощью Tailwind CSS, с отзывчивыми эффектами и поддержкой темных тем.

Открытый