Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
An animated button with ripple useful for user engagement.
runed
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/ripple-button.json
Install dependencies
Install the required packages for this component:
pnpm add runed
Copy the Source Code
Copy and paste the following code into your project:
ripple-button.svelte
index.ts
Add Tailwind CSS
Add the following to your routes/layout.css file:
src/routes/layout.css
Folder Structure
Folder Structure
Props
RippleButton
A component for Ripple Button.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes to apply |
rippleColor | string | "#ffffff" | Color of the ripple effect |
duration | string | "600ms" | Duration of the ripple effect |
children | Snippet | required | The content of the button |