Componentes de búsqueda

Categorías

Botones

Elementos interactivos que desencadenan acciones

Componente Botones de morfismo de vidrio

Botones de morfismo de vidrio que usan tonos tierra para un sitio de portafolio receptivo con modo oscuro

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Earth Tone Buttons</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .glass {
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .dark .glass {
            background-color: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center p-8">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <!-- Button 1: Primary Action -->
        <button class="glass text-stone-800 dark:text-stone-200 font-bold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
            Explore Projects
        </button>

        <!-- Button 2: Secondary Action -->
        <button class="glass text-stone-700 dark:text-stone-300 font-semibold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
            Download CV
        </button>

        <!-- Button 3: Contact -->
        <button class="glass text-stone-600 dark:text-stone-400 font-normal py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50">
            Get in Touch
        </button>

        <!-- Button 4: View Details (Example with Icon) -->
        <button class="glass text-stone-800 dark:text-stone-200 font-bold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 flex items-center justify-center hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            More Info
        </button>

         <!-- Button 5: Learn More -->
        <button class="glass text-stone-700 dark:text-stone-300 font-semibold py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
            Learn More About Me
        </button>

        <!-- Button 6: Hire Me -->
        <button class="glass text-stone-600 dark:text-stone-400 font-normal py-4 px-8 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50">
            Hire Me
        </button>

    </div>

</body>
</html>

Componente Botones de Material Design

Componente de botones de diseño de materiales en tonos tierra para redes sociales

Abrir Vista previa

                ```html
<div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="flex space-x-4 rtl:space-x-reverse">
    <button class="px-4 py-2 bg-amber-600 text-white dark:bg-amber-700 dark:text-stone-200 rounded-md shadow-md hover:bg-amber-700 dark:hover:bg-amber-800 transition duration-300 ease-in-out">Like</button>
    <button class="px-4 py-2 bg-stone-400 text-stone-800 dark:bg-stone-600 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-500 dark:hover:bg-stone-700 transition duration-300 ease-in-out">Comment</button>
    <button class="px-4 py-2 bg-green-600 text-white dark:bg-green-700 dark:text-stone-200 rounded-md shadow-md hover:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out">Share</button>
  </div>
</div>
```

Componente Botones

Un componente de botones minimalista diseñado para un portafolio que muestra trabajos o productos, con colores vibrantes y un diseño receptivo con soporte para temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center h-screen bg-white dark:bg-gray-900 p-4">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Portfolio Buttons</h1>
    <div class="space-y-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-red-500 rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">View Projects</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-200">Contact Me</a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 text-lg font-medium text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Download CV</a>
    </div>
</div>

Componente Botones

Skeuomorphism Componente de botones de tablero complejos análogos con diseño receptivo y soporte de tema oscuro.

Abrir Vista previa

                <div class="flex flex-wrap justify-center items-center p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-xl">
  <!-- Primary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Dashboard
  </button>

  <!-- Secondary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Reports
  </button>

  <!-- Tertiary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-yellow-500 to-yellow-700 hover:from-yellow-600 hover:to-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Analytics
  </button>

  <!-- Disabled Button -->
  <button class="m-4 px-8 py-4 bg-gray-400 dark:bg-gray-600 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-gray-200 dark:text-gray-400 text-lg font-bold cursor-not-allowed">
    Settings
  </button>

  <!-- Icon Button -->
  <button class="m-4 p-4 bg-gradient-to-br from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 rounded-full shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white transform transition-transform duration-200 hover:scale-105">
    <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="M12 4v16m8-8H4"></path></svg>
  </button>
</div>

Componente Botones

Un componente de botones minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="flex flex-wrap space-x-4 justify-center p-6">
    <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Primary Button
    </button>
    <button class="bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Secondary Button
    </button>
    <button class="bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Success Button
    </button>
    <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Danger Button
    </button>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #2563eb; }
        .bg-gray-300 { background-color: #4b5563; }
        .bg-green-500 { background-color: #22c55e; }
        .bg-red-500 { background-color: #ef4444; }
        .text-white { color: #ffffff; }
        .text-gray-800 { color: #f9fafb; }
        .shadow-md { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
    }
</style>

Componente de botones neumórficos

Un componente de botón con un estilo de diseño neumórfico con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
  <div class="flex space-x-4">
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 1</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 2</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 3</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
  </div>
</div>

Componente Botones

Un componente de botones de estilo retro/vintage que presenta efectos responsivos y soporte para temas oscuros, diseñado para evocar la nostalgia de la estética de los años 80 y 90.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
            Retro Pink Button
        </button>
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            Vintage Blue Button
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
            Nostalgic Green Button
        </button>
        <button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
            Retro Purple Button
        </button>
    </div>
    <div class="mt-8">
        <img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
        <p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
    </div>
    <div class="mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
    </div>
</div>