CCHub Logo CCHub Tailwind Collection
구성 요소 단추 뉴모피즘 소셜 미디어 버튼

뉴모피즘 소셜 미디어 버튼

소셜 미디어 인터페이스를 위한 간단한 뉴모피즘(Neumorphism) 스타일의 버튼 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원합니다. 이 버튼은 아날로그 색 구성표와 미묘한 그림자를 사용하여 부드럽고 돌출된 모양을 만듭니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-800">
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Like
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Share
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover-analogous dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover-analogous">
    Comment
  </button>
</div>

<style>
@media (prefers-color-scheme: light) {
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-neumorphism-light-hover:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
    .hover\:shadow-neumorphism-light-hover-analogous:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffeead;
  }
}

@media (prefers-color-scheme: dark) {
  .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
  }
  .hover\:shadow-neumorphism-dark-hover:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #363636;
  }
    .hover\:shadow-neumorphism-dark-hover-analogous:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #808000;
  }
}
</style>

관련 구성 요소

Buttons 구성 요소

미니멀리스트/플랫 디자인의 Buttons Component는 회색조 색 구성표를 사용합니다. 비즈니스/기업 웹 사이트에 적합하며 일부 대화형 기능으로 인해 중간 정도의 복잡성이 있습니다. 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

Buttons 구성 요소

포트폴리오에 대한 다크 모드를 지원하는 반응형 버튼 구성 요소입니다. 적당한 복잡성과 함께 회색조의 미니멀한 플랫 디자인이 특징입니다.

열다

Buttons 구성 요소

트라이어딕 색 구성표, 단순한 복잡성 및 다크 모드를 지원하는 반응형 디자인을 갖춘 레트로 빈티지 테마 버튼 구성 요소로 블로그 또는 콘텐츠 웹 사이트에 적합합니다.

열다