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

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

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

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

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>

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

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

Отзывчивый компонент кнопок социальных сетей, стилизованный в стиле ретро/винтаж 80-х/90-х годов, с поддержкой темной темы с использованием Tailwind CSS и изображений-заполнителей.

Открытый

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

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

Открытый

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

Компонент кнопок социальных сетей с ретро/винтажным дизайном, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS, JavaScript не требуется.

Открытый