A React component library for SEO-friendly buttons that use CSS content
property to display text without affecting keyword density. Perfect for websites with many repeated button texts that could interfere with SEO optimization.
See this package in action at Phone Number Generator - a tool that uses our CSS content button technique to avoid keyword density issues with repeated button text.
When you have multiple buttons with the same text (like "Play", "Download", "Subscribe") on a page, these repeated words can negatively impact your SEO keyword density. This package solves that by using CSS ::before
pseudo-elements with the content
property to display button text, keeping the actual text out of your HTML.
- π SEO Optimized: Button text doesn't affect keyword density
- π¨ Modern Design: Beautiful, customizable button styles
- π± Responsive: Mobile-friendly design
- βΏ Accessible: Proper ARIA labels for screen readers
- π§ TypeScript: Full TypeScript support
- π Flexible: Multiple variants, sizes, and customization options
- β‘ Lightweight: No external dependencies
# Using npm
npm install css-content-button
# Using yarn
yarn add css-content-button
# Using pnpm
pnpm add css-content-button
import React from 'react';
import { CssContentButton } from 'css-content-button';
function App() {
return (
<div>
<CssContentButton
content="Play Video"
onClick={() => console.log('Playing video')}
/>
</div>
);
}
import React from 'react';
import { CssContentButton } from 'css-content-button';
function MyComponent() {
const handleClick = () => {
console.log('Button clicked!');
};
return (
<div>
<CssContentButton
content="Subscribe Now"
variant="primary"
size="large"
onClick={handleClick}
aria-label="Subscribe to our newsletter"
className="my-custom-class"
style={{ '--primary-color': '#ff6b6b' }}
/>
</div>
);
}
Property | Type | Default | Required | Description |
---|---|---|---|---|
content |
string |
- | β | The text to display (rendered via CSS) |
variant |
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' |
'primary' |
β | Button color variant |
size |
'small' | 'medium' | 'large' |
'medium' |
β | Button size |
disabled |
boolean |
false |
β | Whether button is disabled |
onClick |
() => void |
- | β | Click handler function |
className |
string |
'' |
β | Additional CSS class |
style |
React.CSSProperties |
- | β | Custom inline styles |
aria-label |
string |
content |
β | Accessibility label |
<CssContentButton content="Primary" variant="primary" />
<CssContentButton content="Secondary" variant="secondary" />
<CssContentButton content="Success" variant="success" />
<CssContentButton content="Danger" variant="danger" />
<CssContentButton content="Warning" variant="warning" />
<CssContentButton content="Info" variant="info" />
<CssContentButton content="Small" size="small" />
<CssContentButton content="Medium" size="medium" />
<CssContentButton content="Large" size="large" />
You can customize the appearance using CSS variables:
:root {
--primary-color: #your-color;
--primary-hover: #your-hover-color;
--border-radius: 8px;
--font-family: 'Your Font', sans-serif;
}
<CssContentButton
content="Custom Button"
style={{
'--primary-color': '#ff6b6b',
'--border-radius': '20px'
}}
/>
/* Override specific button styles */
.my-custom-button {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.my-custom-button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
Traditional buttons (affects keyword density):
<!-- This HTML contains 40 instances of "Play" -->
<button>Play</button>
<button>Play</button>
<button>Play</button>
<!-- ... 37 more buttons -->
CSS Content buttons (SEO-friendly):
<!-- This HTML contains 0 instances of "Play" in text content -->
<button class="css-content-button" style="--button-content: 'Play'"></button>
<button class="css-content-button" style="--button-content: 'Play'"></button>
<button class="css-content-button" style="--button-content: 'Play'"></button>
<!-- ... 37 more buttons -->
The text "Play" is displayed via CSS content
property, keeping it out of your HTML and preserving your keyword density for SEO.
The component maintains full accessibility:
- Proper ARIA labels (uses
content
as fallback) - Keyboard navigation support
- Focus indicators
- Screen reader compatibility
<CssContentButton
content="Play Video"
aria-label="Play the promotional video about our product"
/>
- Chrome β₯ 51
- Firefox β₯ 54
- Safari β₯ 10
- Edge β₯ 79
# Clone the repository
git clone https://github.com/jbgf/css-content-button.git
cd css-content-button
# Install dependencies
pnpm install
# Development mode
pnpm run dev
# Build
pnpm run build
# Run tests
pnpm test
# Lint code
pnpm run lint
css-content-button/
βββ src/
β βββ index.tsx # Main component
β βββ css-content-button.css # Styles
β βββ index.test.tsx # Tests
βββ dist/ # Build output
βββ package.json
βββ tsconfig.json
βββ rollup.config.js
βββ README.md
// Product listing with many "Add to Cart" buttons
function ProductGrid({ products }) {
return (
<div className="product-grid">
{products.map(product => (
<div key={product.id} className="product-card">
<h3>{product.name}</h3>
<p>{product.description}</p>
<CssContentButton
content="Add to Cart"
variant="primary"
onClick={() => addToCart(product.id)}
aria-label={`Add ${product.name} to cart`}
/>
</div>
))}
</div>
);
}
// Video thumbnails with many "Play" buttons
function VideoThumbnail({ video }) {
return (
<div className="video-thumbnail">
<img src={video.thumbnail} alt={video.title} />
<CssContentButton
content="Play"
variant="primary"
size="large"
onClick={() => playVideo(video.id)}
aria-label={`Play ${video.title}`}
className="play-button-overlay"
/>
</div>
);
}
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
MIT Β© [Your Name]
Inspired by the SEO optimization technique of using CSS content
property to avoid keyword density issues, as discussed in various SEO communities.
- π Initial release
- β¨ CSS content button implementation
- π¨ Multiple variants and sizes
- βΏ Full accessibility support
- π± Responsive design
- π§ TypeScript support
Made with β€οΈ for better SEO and cleaner HTML