Slidington NPM

Slidington 🎮

A lightweight, customizable button library that brings interactive and stylish buttons to your web projects. With multiple models and easy integration, Slidington simplifies the process of creating engaging button elements.

Hey there! This project started as a fun little side project and wasn’t really meant for production—though it totally can be used that way. It’s not the fanciest library out there, but I’ll keep it updated when I can.

✨ Features

🎯 Simple integration
🪶 Lightweight (<5KB gzipped)
♿ Built with accessibility in mind
🎨 Multiple button models
🎮 Interactive animations
🛠️ Highly customizable

📦 Installation

NPM

npm install slidington

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slidington@latest/dist/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/slidington@latest/dist/script.min.js"></script>

🚀 Usage

Create interactive buttons by using the slidington.create() method:

slidington.create({
    title: 'Your Button',
    description: 'Optional button description',
    model: 'default', // Choose from available models
    image: '#555555', // Color code or image URL
    link: 'https://your-link.com',
    buttonColor: '#3a8d8d',
    arrowColor: '#ffde00'
});

🎨 Available Models

Default - Classic sliding animation
Triangle - Triangle-shaped hover effect
Solid - Solid sliding animation
Teardrop - Teardrop-shaped animation
Wave - Wave effect
ZigZag - Zigzag pattern animation
Stairs - Stair-step animation
Outlet - Plug and play animation

⚙️ Configuration Options

Option	Type	Description
`title`	String	Button text
`description`	String	Optional description
`model`	String	Button model
`image`	String	Background color or image URL
`link`	String	URL for button click
`action`	String	Custom function name for click events
`buttonColor`	String	Main button color
`arrowColor`	String	Arrow icon color

🌟 Examples

Link Button

slidington.create({
    title: 'Visit Portfolio',
    description: 'Click to explore amazing projects',
    model: 'default',
    image: '#555555',
    link: 'https://example.com',
    buttonColor: '#3a8d8d',
    arrowColor: '#ffde00'
});

Custom Action Button

slidington.create({
    title: 'Take Action',
    description: 'Click to trigger custom function',
    model: 'triangle',
    image: 'path/to/image.jpg',
    action: 'yourCustomFunction',
    buttonColor: '#23542a',
    arrowColor: '#ffde00'
});