Asad Button Library

A comprehensive CSS/SCSS button library featuring 500+ unique button effects and animations

Features

• 500+ Unique Button Effects - From simple hover states to complex 3D animations
• Modular SCSS Architecture - Clean, maintainable, and customizable code structure
• BEM-inspired Class System - Easy integration with existing projects
• Zero Dependencies - Pure CSS/SCSS implementation

Button Categories

| Category | Description | Examples |

|----------|-------------|----------|

| Basic Effects | Simple hover states and transitions | Basic, Outline | | Slide & Movement | Dynamic sliding animations | Slide Right/Left/Top/Bottom | | Scale & Animation | Zoom, shake, and loading effects | Scale Up/Down, Shake, Loading | | Gradient & Color | Beautiful gradient transitions | Gradient Shift, Flow, Border | | Border Effects | Creative border animations | Border Grow, Pulse, Slide | | Fill & Transform | Split fills and morphing effects | Vertical/Horizontal Split Fill | | Text Effects | Typography animations | Text Change, Transform, Shake | | 3D & Depth | Three-dimensional effects | Press Button, Curved, Lighting | | Glass & Glow | Modern glassmorphism and neon | Glass Gradient, Glow Pink/Neon | | Advanced | Neumorphic, retro, and experimental | Neumorphic, Cyber Wobble |

Quick Start

1. Setup

• Basic Usage

Click Me

Slide Right

Gradient Shift

📚 Documentation Base Button Structure All buttons require the base .btn class:

Base Button

Adding Effects Combine base class with effect classes:

Slide Right Slide Left

Gradient Shift Gradient Flow

Scale Up Scale Down

Size Modifiers Extra Small Small Medium Large Extra Large

Spacing Utilities

4px top/bottom 12px top/bottom 24px top/bottom

8px left/right 16px left/right 24px left/right

Border Radius Options No Radius 4px Radius 8px Radius 12px Radius 20px Radius 32px Radius Pill Shape Square

Some Button Examples

Gradient Collection

Gradient Shift

Gradient Flow

Plain to Gradient

Gradient Border

Slide Animations

Slide Right Slide Left Slide Top Slide Bottom

Left to Right Slide Across

3D & Special Effects

Press Button

Neumorphic

Glow Neon

Glass Gradient

Customization

SCSS Variables Customize colors, spacing, and animations in _variables.scss:

// Primary Colors $color-org: #ff8c00; // Primary orange $white: #fff; $black: #000;

// Button Sizing

$padding: 16px 32px; // Default padding $padding-lg: 24px 40px; // Large padding $padding-xs: 8px 12px; // Small padding

// Border Radius

$radius20: 20px; // Default radius $radius15: 15px; $br-4: 4px; // Small radius

// Animations

$btn-transition: all 0.3s ease-in-out; $btn-transition-long: all 0.4s ease-in-out;

// Typography

$text-base: 16px; $font-medium: 500; $ls-1: 1px; // Letter spacing

📁 Project Structure buttonica/ ├── index.html # Live demo with all 500+ buttons ├── index.scss # Main SCSS entry point ├── _variables.scss # Customizable variables ├── _base.scss # Base button foundation ├── _all-button.scss # Complete button implementations ├── _animations.scss # Keyframe animations library ├── _spacing.scss # Spacing utility classes ├── _sizes.scss # Size modifier classes ├── _mixins.scss # SCSS helper mixins ├── _reset.scss # CSS reset and base styles └── dist/ └── buttonica.css # Compiled production CSS

-- Showcase

Perfect for:

• UI/UX Portfolios - Demonstrate animation and design skills
• Web Applications - Enhance user interaction and engagement
• Landing Pages - Create compelling call-to-action buttons
• Interactive Projects - Add polished button interactions
• Learning Resource - Study modern CSS animation techniques

-- Contact

Email: asadusama121@gmail.com