glass-button

Installation

The glass-button is available as a CSS-only design system configuration, a Native Web Component, or a React component template. Copy the styled classes directly, or import the script via CDN:

<!-- Standard Google Font for premium typography -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<!-- Load Web Component directly via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@dqev/glass-button@latest/dist/glass-button.js"></script>

HTML & CSS

For high-performance static pages, apply the CSS rules directly. Use variables inside your styles to support dynamic scaling:

<a href="#" class="glass-btn-base glass-btn">
  <span>Dashboard</span>
</a>

Web Component

Define custom web elements inside your application scripting. The component listens to attributes and redraws changes efficiently in the Shadow DOM:

// Import custom element configuration
import './GlassButton.js';

// Render customized component
const el = document.createElement('glass-button');
el.setAttribute('bg', '#2998d9');
el.setAttribute('radius', '40');
el.setAttribute('icon-type', 'arrow');
el.textContent = 'Dashboard';
document.body.appendChild(el);

React Component

Import the React TSX template directly into your component library. It supports hover state hooks, class overlays, custom events, and type checking:

import { GlassButton } from './GlassButton';

function App() {
  return (
    <GlassButton 
      bg="#2998d9" 
      radius={40} 
      iconType="arrow"
      onClick={() => console.log('Clicked')}
    >
      Dashboard
    </GlassButton>
  );
}

API Reference

Configure and scale the component behavior using the following attributes or properties:

Built-In Presets