Buttons 구성 요소
소셜 미디어 인터페이스를 위해 3D 요소와 생생한 색상으로 디자인된 버튼 구성 요소는 어두운 테마와 반응형 디자인을 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
<img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
Follow
</a>
<a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
<img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
Share
</a>
<a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
<img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
Like
</a>
</div>
</div>관련 구성 요소
Glassmorphism Buttons 컴포넌트
파스텔 색상과 Tailwind CSS를 사용하는 다크 모드를 지원하는 간단하고 반응이 빠른 Glassmorphism 버튼 구성 요소입니다.
인터랙티브 사진 갤러리 단추
사진 갤러리 및 사진 작가 포트폴리오를 위해 설계된 반응형 대화형 버튼 세트로, 숲/녹색 색상 팔레트와 사용자 참여를 위한 미묘한 마이크로 상호 작용 효과가 특징입니다. 다크 모드 지원이 포함됩니다.