Buttons 구성 요소
CRM/비즈니스 도구 애플리케이션을 위한 대화형 버튼 세트로, 마이크로 인터랙션, 보석 톤 색상 및 다크 모드 지원을 통한 완전한 응답성을 제공합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-xl p-6 sm:p-8 space-y-8 border border-purple-200 dark:border-purple-900">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-400 mb-8">
CRM Action Buttons
</h2>
<!-- Primary Action Buttons -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800
text-white text-lg font-semibold shadow-lg
transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:active:bg-emerald-900">
<span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span>New Contact</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-sapphire-600 hover:bg-sapphire-700 active:bg-sapphire-800
text-white text-lg font-semibold shadow-lg
transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
dark:bg-sapphire-700 dark:hover:bg-sapphire-800 dark:active:bg-sapphire-900">
<span class="absolute inset-0 bg-sapphire-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
<span>View Pipeline</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-ruby-600 hover:bg-ruby-700 active:bg-ruby-800
text-white text-lg font-semibold shadow-lg
transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
dark:bg-ruby-700 dark:hover:bg-ruby-800 dark:active:bg-ruby-900">
<span class="absolute inset-0 bg-ruby-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span>Schedule Demo</span>
</button>
</div>
<!-- Secondary Action Buttons -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-4">
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700
text-white text-lg font-semibold shadow-md
transition-all duration-300 ease-out transform hover:-translate-y-1
dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:active:bg-indigo-800">
<span class="absolute inset-0 bg-indigo-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span>Send Email</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-purple-500 hover:bg-purple-600 active:bg-purple-700
text-white text-lg font-semibold shadow-md
transition-all duration-300 ease-out transform hover:-translate-y-1
dark:bg-purple-600 dark:hover:bg-purple-700 dark:active:bg-purple-800">
<span class="absolute inset-0 bg-purple-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.59 1.34L15.38 5.76a1 1 0 011.02-.303L21 4V3a1 1 0 00-1-1H4a1 1 0 00-1 1v2zm0 14a2 2 0 002 2h14a2 2 0 002-2v-3l-2.03-2.03a1 1 0 00-.98-.21L15 14l-2.5-1.5-2.59 1.34L9 17l-1.34 2.68L5 20a1 1 0 01-1-1v-2l-1 .5V19z"></path></svg>
<span>Log Activity</span>
</button>
<button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
bg-teal-500 hover:bg-teal-600 active:bg-teal-700
text-white text-lg font-semibold shadow-md
transition-all duration-300 ease-out transform hover:-translate-y-1
dark:bg-teal-600 dark:hover:bg-teal-700 dark:active:bg-teal-800">
<span class="absolute inset-0 bg-teal-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span>Add Note</span>
</button>
</div>
<!-- Utility Buttons with subtle hover effects -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-6">
<button class="relative group flex items-center justify-center px-4 py-2 rounded-lg overflow-hidden
bg-gray-100 hover:bg-gray-200 active:bg-gray-300
text-gray-700 text-base font-medium shadow-sm
transition-all duration-200 ease-in-out transform hover:scale-105
dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200">
<span class="absolute inset-0 bg-gray-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0014.586 3H7a2 2 0 00-2 2v11m0 0l-1 1h4m-4-4v4관련 구성 요소
아르데코 네온 버튼
아르데코 기하학적 스타일과 생생한 네온/전기 색 구성표가 있는 단순하고 반응이 빠른 버튼 구성 요소로 의료 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.
인터랙티브 사진 갤러리 단추
사진 갤러리 및 사진 작가 포트폴리오를 위해 설계된 반응형 대화형 버튼 세트로, 숲/녹색 색상 팔레트와 사용자 참여를 위한 미묘한 마이크로 상호 작용 효과가 특징입니다. 다크 모드 지원이 포함됩니다.
Buttons 구성 요소
종이/인쇄에서 영감을 받은 그레이스케일 디자인의 간단하고 반응이 빠른 버튼 구성 요소로, 교육 플랫폼에 적합하며 라이트 모드와 다크 모드를 지원합니다.