CCHub Logo CCHub Tailwind Collection
구성 요소 팔로우 버튼 Glassmorphism 팔로우 버튼

Glassmorphism 팔로우 버튼

Tailwind CSS를 사용하는 Glassmorphism 디자인, 다크 모드 지원의 반응형 팔로우 버튼.

미리 보기

HTML 코드 

<template>
  <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
      Follow
    </span>
  </button>
</template>

관련 구성 요소

Follow Button 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 머티리얼 디자인 스타일로 설계된 반응형 Follow Button 컴포넌트입니다.

열다

팔로우 버튼

다크 모드 UI Follow Button Component는 반응형 효과와 어두운 테마를 지원합니다.

열다

마이크로 인터랙션을 통한 Follow Button

어두운 테마를 지원하고 마이크로 인터랙션을 제공하는 반응형 Follow Button 구성 요소로, Tailwind CSS를 사용하는 소셜 미디어 애플리케이션용으로 설계되었습니다. 단색 색 구성표와 복잡한 상호 작용 요소가 특징입니다.

열다