Skip to main content

​
Overview

Ready-to-use button component with size and color variants. Buttons are designed to work seamlessly with Elementor v4’s styling system and can be customized with utility classes.

​
Button Base

Button Base

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

​
Button Sizes

Button Sizes

.btn-sm8px 16px14pxSmall buttons
.btn-lg16px 32px18pxLarge buttons

​
Button Colors

Button Colors

.btn-blue#3b82f6WhitePrimary actions
.btn-green#10b981WhiteSuccess actions
.btn-red#ef4444WhiteDanger actions

​
Examples

​
Basic Buttons

<button class="btn btn-blue">Primary Button</button>
<button class="btn btn-green btn-lg">Large Success Button</button>
<button class="btn btn-red btn-sm">Small Danger Button</button>

​
Button in Card

<div class="card p-6">
  <h3 class="text-xl font-semibold mb-4">Card with Button</h3>
  <p class="text-gray mb-4">Card content with action button</p>
  <button class="btn btn-blue">Action</button>
</div>

​
Button Variants

<!-- Solid button -->
<button class="btn btn-blue">Solid Button</button>

<!-- Outlined button -->
<button class="border-2 border-blue text-blue px-6 py-3 rounded hover:bg-blue hover:text-white">
  Outlined Button
</button>

<!-- Disabled button -->
<button class="btn btn-blue opacity-50 cursor-not-allowed">
  Disabled Button
</button>

​
Common Patterns

​
Button Groups

<div class="flex gap-4">
  <button class="btn btn-blue">Primary</button>
  <button class="btn btn-green">Success</button>
  <button class="btn btn-red">Danger</button>
</div>

​
Full Width Button

<button class="btn btn-blue w-full">Full Width Button</button>

​
Button with Icon

<button class="btn btn-blue flex items-center gap-2">
  <span>✓</span>
  <span>Submit</span>
</button>

​
Best Practices

  • Use semantic colors: Match button colors to their purpose (blue for primary, red for danger)
  • Consistent sizing: Use the same button size for similar actions
  • Clear labels: Use descriptive button text
  • Accessibility: Ensure buttons have sufficient contrast and are keyboard accessible

Card

Card component

Container

Container component

Colors

Color utilities

Components Overview

Complete components overview