NCSS/Glass Engine™ Series

Glass Button

A premium, high-performance UI component built with Tailwind CSS and React.

Preview

Loading preview...

Installation

Add the required dependencies if you haven't already:

1npm install framer-motion clsx tailwind-merge

Copy and paste the following code into your project:

1"use client";
2
3import { motion } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export default function GlassButton({ 
7  children = "Click Me", 
8  className,
9  onClick
10}) {
11  return (
12    <motion.button
13      whileHover={{ scale: 1.05 }}
14      whileTap={{ scale: 0.95 }}
15      onClick={onClick}
16      className={cn(
17        "relative overflow-hidden rounded-xl px-8 py-4 font-semibold text-white",
18        "bg-white/10 backdrop-blur-md border border-white/20 shadow-[0_4px_30px_rgba(0,0,0,0.1)]",
19        "transition-all duration-300 hover:bg-white/20 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]",
20        className
21      )}
22    >
23      {/* Shine effect on hover */}
24      <div className="absolute inset-0 -translate-x-full hover:animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12" />
25      
26      <span className="relative z-10">{children}</span>
27      
28      <style dangerouslySetInnerHTML={{__html: `
29        @keyframes shimmer {
30          100% {
31            transform: translateX(100%);
32          }
33        }
34      `}} />
35    </motion.button>
36  );
37}
38