Component
Animated Scale Button
Scale animations on hover for interactive feedback
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/animated-button/scale/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/animated-button/scale Tailwind/Components/Buttons/animated-button/scale <!-- Scale Button - Scale Up -->
<button class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-transform">
Scale Up
</button>
<!-- Scale Button - Scale Down -->
<button class="px-8 py-3 bg-purple-600 text-white font-semibold rounded-lg hover:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-transform">
Scale Down
</button>
<!-- Scale Button - Bounce -->
<button class="px-8 py-3 bg-green-600 text-white font-semibold rounded-lg hover:scale-110 focus:outline-none focus:ring-2 focus:ring-green-500 transition-transform">
Bounce
</button># Animated Button Scale
Button with a scale transform on interaction.
## Preview
Open `preview.html` for a standalone demonstration of this variant.
## Features
- Scale animation on hover/active
- CSS transitions
- Focus-visible states
## Usage
```bash
npx devsnips add Tailwind/Components/Buttons/animated-button/scale
```
Copy from `code.html`.
## Customization
- Scale amount and transition utilities
- Colors, padding, radius
## Accessibility
- Native `<button>`
- Focus-visible styles
## Dependencies
- Tailwind CSS only
## File Structure
- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file 14 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf
Agent skill & Model Context Protocol
Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.
devsnips://components/buttons/animated-button/scale I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/animated-button/scale/ Install: npx devsnips add Tailwind/Components/Buttons/animated-button/scale This is the Animated Scale Button — Scale animations on hover for interactive feedback Use this DevSnips resource as the starting point for my project. Adapt it to my project's stack and conventions, fix any issues, and make it production-ready while preserving its intended design and behavior.
Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.
Resource URI
devsnips://components/buttons/animated-button/scale