<!--
@type: Button
@industry: Business
@style: Modern
@category: UI Element
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-400: #94a3b8;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-50: #eef2ff;
--color-indigo-100: #e0e7ff;
--color-indigo-200: #c7d2fe;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
/* Sizes */
--size-5: 1.25rem;
--size-lg: 1.125rem;
--size-base: 1rem;
--size-sm: 0.875rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.button-section {
background-color: var(--color-slate-50);
padding: var(--spacing-10) var(--spacing-4);
}
.container {
max-width: 42rem;
margin: 0 auto;
}
.grid {
display: grid;
gap: var(--spacing-8);
}
.card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: var(--spacing-6);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border: 1px solid var(--color-slate-200);
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
font-size: var(--size-lg);
font-weight: 600;
color: var(--color-slate-900);
margin-bottom: var(--spacing-2);
}
.card-description {
color: var(--color-slate-600);
font-size: var(--size-sm);
text-align: center;
margin-bottom: var(--spacing-4);
}
/* Button Styles */
.btn {
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
font-weight: 500;
font-size: var(--size-base);
transition: all 0.15s;
border: none;
cursor: pointer;
}
.btn:focus {
outline: none;
}
.btn-primary {
background-color: var(--color-indigo-600);
color: var(--color-white);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.btn-primary:hover {
background-color: var(--color-indigo-700);
}
.btn-primary:focus {
box-shadow: 0 0 0 2px var(--color-indigo-200);
}
.btn-primary[aria-pressed="true"] {
background-color: var(--color-indigo-700);
}
.btn-secondary {
background-color: var(--color-white);
color: var(--color-indigo-600);
border: 1px solid var(--color-indigo-600);
}
.btn-secondary:hover {
background-color: var(--color-indigo-50);
}
.btn-secondary:focus {
box-shadow: 0 0 0 2px var(--color-indigo-200);
}
.btn-icon {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
}
.btn-icon svg {
width: var(--size-5);
height: var(--size-5);
}
.btn-disabled {
background-color: var(--color-slate-200);
color: var(--color-slate-400);
cursor: not-allowed;
opacity: 0.7;
}
/* Dropdown Styles */
.dropdown-wrapper {
margin-top: var(--spacing-10);
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
text-align: left;
}
.dropdown-btn {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-btn svg {
width: var(--size-5);
height: var(--size-5);
margin-left: var(--spacing-2);
}
.dropdown-menu {
position: absolute;
z-index: 10;
margin-top: var(--spacing-2);
width: 100%;
background-color: var(--color-white);
border: 1px solid var(--color-slate-200);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.dropdown-item {
display: block;
width: 100%;
text-align: left;
padding: var(--spacing-3) var(--spacing-6);
color: var(--color-slate-900);
background: none;
border: none;
cursor: pointer;
font-size: var(--size-base);
transition: background-color 0.15s;
}
.dropdown-item:hover {
background-color: var(--color-indigo-50);
}
.dropdown-item:focus {
background-color: var(--color-indigo-100);
outline: none;
}
.hidden {
display: none;
}
/* Responsive Styles */
@media (min-width: 640px) {
.button-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
<section class="button-section">
<div class="container">
<div class="grid">
<!-- Primary CTA Button Card -->
<div class="card">
<h3 class="card-title">Primary Action</h3>
<p class="card-description">Drive conversions with a bold, high-contrast call-to-action button.</p>
<button type="button" class="btn btn-primary" aria-label="Get Started">
Get Started
</button>
</div>
<!-- Secondary Button Card -->
<div class="card">
<h3 class="card-title">Secondary Action</h3>
<p class="card-description">Offer an alternative or less prominent action for your users.</p>
<button type="button" class="btn btn-secondary" aria-label="Learn More">
Learn More
</button>
</div>
<!-- Icon Button Card -->
<div class="card">
<h3 class="card-title">Icon Button</h3>
<p class="card-description">Quick actions with clear iconography for business tools.</p>
<button type="button" class="btn btn-primary btn-icon" aria-label="Download Report">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4m-8 8h8"/>
</svg>
Download Report
</button>
</div>
<!-- Disabled Button Card -->
<div class="card">
<h3 class="card-title">Disabled State</h3>
<p class="card-description">Show unavailable actions with clear, accessible styling.</p>
<button type="button" class="btn btn-disabled" aria-label="Processing" disabled>
Processing
</button>
</div>
</div>
<!-- Example: Button with dropdown menu -->
<div class="card dropdown-wrapper">
<h3 class="card-title">Button with Dropdown</h3>
<p class="card-description">Provide quick access to multiple business actions.</p>
<div class="dropdown">
<button type="button" id="dropdownBtn" aria-haspopup="true" aria-expanded="false" class="btn btn-primary dropdown-btn" aria-label="Open actions menu">
Actions
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div id="dropdownMenu" class="dropdown-menu hidden" role="menu" aria-labelledby="dropdownBtn">
<button class="dropdown-item" role="menuitem">View Profile</button>
<button class="dropdown-item" role="menuitem">Settings</button>
<button class="dropdown-item" role="menuitem">Sign Out</button>
</div>
</div>
</div>
</div>
</section>
<script>
// Minimal dropdown toggle
const btn = document.getElementById('dropdownBtn');
const menu = document.getElementById('dropdownMenu');
btn.addEventListener('click', function() {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
menu.classList.toggle('hidden');
});
// Close dropdown on outside click
document.addEventListener('click', function(e) {
if (!btn.contains(e.target) && !menu.contains(e.target)) {
menu.classList.add('hidden');
btn.setAttribute('aria-expanded', 'false');
}
});
</script>
<!--
@type: Button
@industry: Business
@style: Modern
@category: UI Element
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-10 px-4 sm:px-8 font-inter">
<div class="max-w-2xl mx-auto">
<div class="grid gap-8 sm:grid-cols-2">
<!-- Primary CTA Button Card -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col items-center">
<h3 class="text-lg font-semibold text-slate-900 mb-2">Primary Action</h3>
<p class="text-slate-600 mb-4 text-sm text-center">Drive conversions with a bold, high-contrast call-to-action button.</p>
<button type="button" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium text-base shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-200 transition-colors aria-pressed:bg-indigo-700" aria-label="Get Started">
Get Started
</button>
</div>
<!-- Secondary Button Card -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col items-center">
<h3 class="text-lg font-semibold text-slate-900 mb-2">Secondary Action</h3>
<p class="text-slate-600 mb-4 text-sm text-center">Offer an alternative or less prominent action for your users.</p>
<button type="button" class="bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg font-medium text-base hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-200 transition-colors" aria-label="Learn More">
Learn More
</button>
</div>
<!-- Icon Button Card -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col items-center">
<h3 class="text-lg font-semibold text-slate-900 mb-2">Icon Button</h3>
<p class="text-slate-600 mb-4 text-sm text-center">Quick actions with clear iconography for business tools.</p>
<button type="button" class="flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium text-base hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-200 transition-colors" aria-label="Download Report">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4m-8 8h8"/></svg>
Download Report
</button>
</div>
<!-- Disabled Button Card -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col items-center">
<h3 class="text-lg font-semibold text-slate-900 mb-2">Disabled State</h3>
<p class="text-slate-600 mb-4 text-sm text-center">Show unavailable actions with clear, accessible styling.</p>
<button type="button" class="bg-slate-200 text-slate-400 px-6 py-3 rounded-lg font-medium text-base cursor-not-allowed opacity-70" aria-label="Processing" disabled>
Processing
</button>
</div>
</div>
<!-- Example: Button with dropdown menu -->
<div class="mt-10 bg-white rounded-xl p-6 shadow-lg border border-slate-200 max-w-md mx-auto">
<h3 class="text-lg font-semibold text-slate-900 mb-2">Button with Dropdown</h3>
<p class="text-slate-600 mb-4 text-sm">Provide quick access to multiple business actions.</p>
<div class="relative inline-block w-full text-left">
<button type="button" id="dropdownBtn" aria-haspopup="true" aria-expanded="false" class="w-full flex justify-between items-center bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium text-base hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-200 transition-colors" aria-label="Open actions menu">
Actions
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</button>
<div id="dropdownMenu" class="hidden absolute z-10 mt-2 w-full bg-white border border-slate-200 rounded-lg shadow-lg focus:outline-none" role="menu" aria-labelledby="dropdownBtn">
<button class="block w-full text-left px-6 py-3 text-slate-900 hover:bg-indigo-50 focus:bg-indigo-100 transition-colors" role="menuitem">View Profile</button>
<button class="block w-full text-left px-6 py-3 text-slate-900 hover:bg-indigo-50 focus:bg-indigo-100 transition-colors" role="menuitem">Settings</button>
<button class="block w-full text-left px-6 py-3 text-slate-900 hover:bg-indigo-50 focus:bg-indigo-100 transition-colors" role="menuitem">Sign Out</button>
</div>
</div>
<script>
// Minimal dropdown toggle
const btn = document.getElementById('dropdownBtn');
const menu = document.getElementById('dropdownMenu');
btn.addEventListener('click', function() {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
menu.classList.toggle('hidden');
});
// Close dropdown on outside click
document.addEventListener('click', function(e) {
if (!btn.contains(e.target) && !menu.contains(e.target)) {
menu.classList.add('hidden');
btn.setAttribute('aria-expanded', 'false');
}
});
</script>
</div>
</div>
</section>
