Buttons 구성 요소

<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