Component
Ghost Primary Button
Transparent buttons with blue hover background effect
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/ghost-button/primary/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/ghost-button/primary Tailwind/Components/Buttons/ghost-button/primary <!-- Ghost Button - Default -->
<button class="px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
Default
</button>
<!-- Ghost Button - Disabled -->
<button class="px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors" disabled>
Disabled
</button>
<!-- Ghost Button - With Icon -->
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
New Item
</button># Ghost Button Primary
Primary-tinted ghost (transparent) button.
## Preview
Open `preview.html` for a standalone demonstration of this variant.
## Features
- Ghost / transparent surface
- Primary accent on text or hover
- Focus-visible states
## Usage
```bash
npx devsnips add Tailwind/Components/Buttons/ghost-button/primary
```
Copy from `code.html`.
## Customization
- Text and hover background colors
- Padding and radius
## Accessibility
- Native `<button>`
- Ensure contrast remains sufficient on your page background
## Dependencies
- Tailwind CSS only
## File Structure
- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file 15 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/ghost-button/primary I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/ghost-button/primary/ Install: npx devsnips add Tailwind/Components/Buttons/ghost-button/primary This is the Ghost Primary Button — Transparent buttons with blue hover background effect 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/ghost-button/primary