Glassmorphism Buttons Component
Glassmorphism Buttons using Earth Tones for responsive Portfolio site with dark mode
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>Related Components
Buttons Component
A simple buttons component styled with Material Design, using a monochromatic color scheme and supporting dark mode, suitable for business/corporate websites.
Material Design Buttons Component
Material Design Buttons Component in Earth Tones for Social Media