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를 사용하여 어두운 테마를 지원합니다.

열다