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

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

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

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

HTML-код

<div class="flex items-center justify-center min-h-screen bg-zinc-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 border-4 border-zinc-900 dark:border-zinc-100 p-4 bg-white dark:bg-zinc-800 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-500 hover:bg-blue-700 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Twitter
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-700 hover:bg-blue-900 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Facebook
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-red-600 hover:bg-red-800 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Instagram
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-" class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-900 hover:bg-blue-950 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      LinkedIn
    </button>
  </div>
</div>

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

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

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

Открытый

Скевоморфные кнопки «Поделиться» в социальных сетях земляного тона

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

Открытый

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

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

Открытый