Skip to main content

Button Showcase

Explore our collection of interactive buttons

Click create an account to sign up

Documentation

Comprehensive guide for button implementation and customization

Button Implementation

<button class="group relative inline-flex items-center px-6 py-3 
bg-emerald-500 text-white rounded-lg transition-all duration-300 
hover:brightness-110 hover:shadow-[0_0_15px_rgba(255,255,255,0.5)]">
    <span class="mr-2">Get Cortex Free</span>
    <span class="inline-flex items-center justify-center 
    w-6 h-6 border border-white/50 rounded">
        
    </span>
</button>

Hover Effects

  • Button brightens using brightness-110
  • White glow effect using box shadow
  • Smooth transition with duration-300
  • Icon container maintains square shape

Accessibility Features

  • High contrast text for readability
  • Proper focus states for keyboard navigation
  • ARIA labels for screen readers
  • Appropriate touch target sizes

Best Practices

  • Maintain consistent padding and spacing
  • Use semantic HTML elements
  • Implement smooth transitions
  • Ensure responsive behavior

Code Examples

Explore different button implementations and variations

Primary Button

<button class="group inline-flex 
items-center px-6 py-3 
bg-emerald-500 text-white 
rounded-lg transition-all 
duration-300 hover:brightness-110 
hover:shadow-[0_0_15px_rgba(255,255,255,0.5)]">
    Get Cortex Free
</button>

Button with Icon

<button class="group inline-flex 
items-center px-6 py-3 
bg-emerald-500 text-white rounded-lg">
    <span class="mr-2">
        Get Cortex Free
    </span>
    <span class="inline-flex 
    items-center justify-center w-6 
    h-6 border border-white/50 
    rounded">
        
    </span>
</button>

Action Buttons

<button class="p-3 bg-blue-500 
text-white rounded-full 
hover:bg-blue-600">
    <!-- Send Icon -->
</button>

<button class="p-3 bg-red-500 
text-white rounded-full 
hover:bg-red-600">
    <!-- Audio Icon -->
</button>

Customization Options

Tailor the buttons to match your design system

Color Variants

/* Color Variables */
--primary: #10B981;
--secondary: #3B82F6;
--accent: #8B5CF6;

/* Hover Effects */
--glow: 0 0 15px rgba(255,255,255,0.5);
--brightness: 1.1;

Size Variations

Animation Effects

/* Transitions */
transition-all: 300ms;

/* Effects */
hover:brightness-110
hover:scale-105
hover:translate-x-2

Installation Guide

Quick start guide to implement our button components

NPM Installation

npm install @cortex/button-components

Required CSS

/* In your CSS file */
@import '@cortex/button-components/styles.css';

/* Or in your HTML */
<link rel="stylesheet" href="path/to/button-components.css">

Basic Implementation

import { CortexButton } from '@cortex/button-components';

// In your component
<CortexButton 
    variant="primary"
    withIcon={true}
    glowEffect={true}
>
    Get Cortex Free
</CortexButton>

Configuration Options

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                cortex: {
                    primary: '#10B981',
                    // ... other colors
                }
            }
        }
    },
    plugins: [
        require('@cortex/button-components/plugin')
    ]
}