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

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

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

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

HTML-код

<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

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

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

Набор ярких, вдохновленных 3D кнопок социальных сетей, подходящих для веб-сайтов ресторанов и ресторанов, с полной адаптивностью и поддержкой темного режима.

Открытый

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

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

Открытый

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

Простой, отзывчивый компонент кнопок «Поделиться» в социальных сетях с эстетикой, вдохновленной дизайном Мемфиса, с использованием холодных нейтральных цветов, подходящий для CRM/бизнес-инструментов. Включает поддержку темного режима.

Открытый