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

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

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

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

HTML-код 

<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
    <div class="grid grid-cols-2 gap-4">
      <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Twitter</span>
      </a>
      <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
        <span>Facebook</span>
      </a>
      <a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>YouTube</span>
      </a>
      <a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Instagram</span>
      </a>
      <a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>GitHub</span>
      </a>
      <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>LinkedIn</span>
      </a>
    </div>
  </div>
</div>

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

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

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

Открытый

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

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

Открытый

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

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

Открытый