Component:

Button Business Modern

Name: Button Business Modern
Availability: InStock

Free

Tags: Button UI Element Business Modern

Colors:

Description:

This carefully crafted Button component is perfect for Business landing pages, featuring a Modern design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Button Business Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions