Glass Button

buttons

Frosted spatial glassmorphism button with subtle interior highlights.

#button#glass#frosted#blur

Live Interactive Preview

Component Source Code

Select language in the dropdown

GlassButton.tsx

1'use client';
2
3import React from 'react';
4import { Layers } from 'lucide-react';
5
6export default function GlassButton() {
7  return (
8    <button className="flex items-center gap-2 rounded-xl border border-slate-300/80 dark:border-white/15 bg-white/70 dark:bg-white/5 px-6 sm:px-7 py-2.5 sm:py-3 text-sm font-semibold text-slate-800 dark:text-slate-200 backdrop-blur-xl transition-all duration-300 hover:border-slate-400 dark:hover:border-white/30 hover:bg-white/90 dark:hover:bg-white/10 shadow-sm hover:shadow-md active:scale-95">
9      <Layers className="h-4 w-4 text-blue-600 dark:text-blue-400" />
10      <span>Glass Surface</span>
11    </button>
12  );
13}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/buttons/GlassButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import GlassButton from '@/components/buttons/GlassButton';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <GlassButton />
7    </main>
8  );
9}