Component
Soft Background Button
Soft background buttons with pastel colors for subtle actions
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/filled-button/soft/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/filled-button/soft Tailwind/Components/Buttons/filled-button/soft <!-- Soft Background Button - Blue -->
<button class="px-6 py-2.5 bg-blue-100 text-blue-700 font-medium rounded-lg hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
Soft Blue
</button>
<!-- Soft Background Button - Green -->
<button class="px-6 py-2.5 bg-green-100 text-green-700 font-medium rounded-lg hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all">
Soft Green
</button>
<!-- Soft Background Button - Red -->
<button class="px-6 py-2.5 bg-red-100 text-red-700 font-medium rounded-lg hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all">
Soft Red
</button>
<!-- Soft Background Button - Amber -->
<button class="px-6 py-2.5 bg-amber-100 text-amber-700 font-medium rounded-lg hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 transition-all">
Soft Amber
</button>
<!-- Soft Background Button - Purple -->
<button class="px-6 py-2.5 bg-purple-100 text-purple-700 font-medium rounded-lg hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all">
Soft Purple
</button>
<!-- Soft Background Button - Pink -->
<button class="px-6 py-2.5 bg-pink-100 text-pink-700 font-medium rounded-lg hover:bg-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 transition-all">
Soft Pink
</button># Filled Button Soft
Soft filled button with a muted solid background.
## Preview
Open `preview.html` for a standalone demonstration of this variant.
## Features
- Soft filled surface
- Focus-visible states
- Native button
## Usage
```bash
npx devsnips add Tailwind/Components/Buttons/filled-button/soft
```
Copy from `code.html`.
## Customization
- Soft fill and text colors
- Hover / active states
- Spacing and 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 29 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/filled-button/soft I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/filled-button/soft/ Install: npx devsnips add Tailwind/Components/Buttons/filled-button/soft This is the Soft Background Button — Soft background buttons with pastel colors for subtle actions 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/filled-button/soft