아르 데코 부동산 버튼 구성 요소

<div class="font-sans bg-white dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex flex-col items-center justify-center">

  <!-- Component Title -->
  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 lg:mb-12 text-center tracking-tight leading-tight uppercase relative">
    <span class="block relative z-10">Property Actions</span>
    <span class="block w-full h-1 bg-gray-300 dark:bg-gray-700 absolute bottom-0 left-0 transform -translate-y-1/2 z-0"></span>
    <span class="block w-full h-1 bg-gray-300 dark:bg-gray-700 absolute top-0 left-0 transform translate-y-1/2 z-0"></span>
  </h1>

  <!-- Buttons Container -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 max-w-7xl w-full">

    <!-- Primary Action Button: View Details -->
    <button aria-label="View Property Details" class="group relative overflow-hidden bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <svg class="w-6 h-6" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 0M17.582 17.582A2 2 0 0118 20.414.418 2.766 2.766 0 0118.707 20l2.121-2.121a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-2.121 2.121a1 1 0 01-1.414 0L18 20.414A2 2 0 0117.586 18H2.414a2 2 0 01-1.414-.586l-.707-.707a1 1 0 010-1.414l2.121-2.121a1 1 0 011.414 0l.707.707a.418 2.766 2.766 0 01.293.293z"></path></svg>
        <span class="uppercase tracking-wider">View Details</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-500 dark:bg-gray-400 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Secondary Action Button: Schedule Tour -->
    <button aria-label="Schedule a Property Tour" class="group relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <svg class="w-6 h-6" 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 8h.01M7 12h.01M7 15h.01M17 12h.01M17 15h.01M17 18h.01M2 20h20a2 2 0 002-2V6a2 2 0 00-2-2H2a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="">Schedule Tour</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-400 dark:bg-gray-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Tertiary Action Button: Save to Favorites -->
    <button aria-label="Save Property to Favorites" class="group relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <svg class="w-6 h-6" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
        <span class="">Save Property</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-300 dark:bg-gray-600 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Special Feature Button: Virtual Tour -->
    <button aria-label="Take a Virtual Tour" class="group relative overflow-hidden bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-700 text-gray-900 dark:text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-500 dark:focus:ring-gray-500 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
       <svg class="w-6 h-6" 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="M4 7v10h16V7H4zm0 0l-2-2m2 2l-2-2m2 2l2-2m-2 2l-2-2m2 2l2-2m8 0h.01M7 7h.01M7 17h.01M17 7h.01M17 17h.01"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 9l-4 3m0 0l4 3m-4-3H4"></path></svg>
        <span class="uppercase tracking-wider">Virtual Tour</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-600 dark:bg-gray-300 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Informational Button: Get Directions -->
    <button aria-label="Get Directions to Property" class="group relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-150 dark:border-gray-850 focus:outline-none focus:ring-4 focus:ring-gray-250 dark:focus:ring-gray-850 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <svg class="w-6 h-6" 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 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.553-.832L9 7m0 13l6-3m-6 3V7m6 10l4.447 2.224A1 1 0 0021 18.382V7.618a1 1 0 00-1.553-.832L15 11m0 9V11m0 0l-1 1m4-4l-1 1"></path></svg>
        <span class="">Get Directions</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-200 dark:bg-gray-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Communication Button: Contact Agent -->
    <button aria-label="Contact the Real Estate Agent" class="group relative overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-gray-100 font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <svg class="w-6 h-6" 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.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
        <span class="uppercase tracking-wider">Contact Agent</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-500 dark:bg-gray-400 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

  </div>

  <!-- Custom CSS for Art Deco Polygon -->
  <style>
    .clip-path-polygon-button {
        clip-path: polygon(0% 0%, 10% 100%, 100% 100%, 90% 0%); /* Example of a geometric pattern (parallelogram) */
        /* Adjust values for diverse geometric shapes to fit Art Deco aesthetic */
    }

    /* To make dark mode toggleable for easy viewing if integrated */
     body.dark-mode .dark\:bg-gray-900 { background-color: #1a202c; }
     body.dark-mode .dark\:text-white { color: #ffffff; }
     body.dark-mode .dark\:from-gray-700 { background-image: linear-gradient(to bottom right, #4a5568, #2d3748); }
     body.dark-mode .dark\:to-gray-800 { background-image: linear-gradient(to bottom right, #4a5568, #2d3748); }
    /* ... other dark mode styles ... */
  </style>

</div>