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>관련 구성 요소
Neumorphic Follow Button 컴포넌트
일몰/따뜻한 톤의 복잡한 뉴모픽 스타일의 팔로우 버튼 구성 요소로, 부동산 플랫폼용으로 설계되었습니다. 반응형 디자인과 다크 모드 지원이 특징이며, 미묘한 그림자를 사용하여 요소가 배경에서 돌출된 것처럼 보입니다.
Follow Button 구성 요소
전자 상거래 애플리케이션에 적합한 보색 구성표를 사용하여 glassmorphism 효과로 설계된 복잡한 follow button 구성 요소로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.