Button Ghost

                    <!-- Primary Ghost Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-blue-600 bg-transparent hover:bg-blue-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors">
  Primary
</button>

<!-- Secondary Ghost Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-purple-600 bg-transparent hover:bg-purple-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-colors">
  Secondary
</button>

<!-- Success Ghost Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-green-600 bg-transparent hover:bg-green-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors">
  Success
</button>

<!-- Danger Ghost Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-red-600 bg-transparent hover:bg-red-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors">
  Danger
</button>

<!-- Dark Ghost Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-gray-700 bg-transparent hover:bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 transition-colors">
  Dark
</button>