Composants Boutons Composant Glassmorphism Buttons

Composant Glassmorphism Buttons

Boutons Glassmorphism utilisant des tons de terre pour un site Portfolio réactif avec mode sombre

Aperçu

HTML Code

<!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>

Composants associés

Composant Boutons

Un composant de boutons minimaliste conçu pour un portfolio présentant des travaux ou des produits, avec des couleurs vives et un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant Boutons

Un composant de boutons de style rétro/vintage qui présente des effets réactifs et une prise en charge du thème sombre, conçu pour évoquer la nostalgie de l’esthétique des années 80 et 90.

Ouvrir

Composant Boutons

Un composant de boutons de style 3D adapté à un portefeuille avec une palette de couleurs analogue et la prise en charge du mode sombre.

Ouvrir