Photo by Markus Spiske on Unsplash

Split Button Design Using HTML and CSS

Create modern, responsive split buttons using HTML and CSS, featuring a main action button and a dropdown toggle with hover and active animations. This implementation focuses on clean design, smooth transitions, accessibility, and maintainable code structure.

Prerequisites

• Basic HTML and CSS knowledge
• A code editor (e.g., VS Code)

Part 1: Split Button Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the split buttons using a container with two button elements.

<div class="split-button">
    <button class="split-button__main" aria-label="Main action">Action</button>
    <button class="split-button__toggle" aria-label="Toggle dropdown"></button>
</div>
<div class="split-button split-button--secondary">
    <button class="split-button__main" aria-label="Secondary main action">Action</button>
    <button class="split-button__toggle" aria-label="Toggle secondary dropdown"></button>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the split buttons with a clean layout, smooth transitions, and responsive design.

:root {
  --gray-90: #1a202c;
  --gray-80: #2d3748;
  --gray-70: #4a5568;
  --gray-5: #e2e8f0;
  --gray-20: #cbd5e0;
  --white: #ffffff;
  --black: #000000;
  --space-sm: 8px;
  --space-md: 1.25rem;
  --border-radius-sm: 4px;
  --transition-normal: 0.3s ease;
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.split-button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  font-family: var(--font-main);
}

.split-button__main,
.split-button__toggle {
  border: none;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-normal), transform var(--transition-normal);
}

.split-button__main {
  padding: var(--space-md) 24px;
  background: var(--gray-90);
  color: var(--white);
}

.split-button__toggle {
  padding: var(--space-md) 12px;
  background: var(--gray-80);
  color: var(--white);
}

.split-button__main:hover,
.split-button__toggle:hover {
  background: var(--gray-70);
  transform: translateY(-2px);
}

.split-button__main:focus,
.split-button__toggle:focus {
  outline: 2px solid var(--gray-70);
  outline-offset: 2px;
}

.split-button__main:active,
.split-button__toggle:active {
  transform: translateY(0);
}

.split-button--secondary .split-button__main {
  background: var(--gray-5);
  color: var(--gray-90);
}

.split-button--secondary .split-button__toggle {
  background: var(--gray-20);
  color: var(--gray-90);
}

.split-button--secondary .split-button__main:hover,
.split-button--secondary .split-button__toggle:hover {
  background: var(--gray-70);
  color: var(--white);
}

.split-button__toggle::after {
  content: "\25BC";
  margin-left: var(--space-sm);
  font-size: 0.75rem;
}

Explanation

• Button Layout: Uses an inline-flex container to align the main and toggle buttons side by side, with overflow: hidden to ensure the border radius is applied consistently.
• Hover and Active Effects: CSS :hover changes the background and lifts each button slightly, while :active resets the lift for a pressed effect. The toggle button includes a downward arrow via ::after.
• Accessibility: aria-label on both buttons and focus states ensure screen reader and keyboard compatibility.

UX Tip: Ensure the split buttons are visually distinct with clear hover and active states, and the toggle is recognizable as a dropdown trigger. Use ARIA attributes and test keyboard navigation for accessibility.

Accessibility Features

• Use button for semantic structure
• Ensure proper contrast ratios (4.5:1 minimum)
• Support keyboard navigation with focus states
• Provide aria-label for screen readers

Golden Rules

• Use CSS variables for easy theme changes
• Implement focus states for keyboard navigation
• Maintain consistent spacing and sizing
• Optimize for mobile with responsive design

Conclusion

A professional split button should maintain visual hierarchy, provide clear interactive states, remain responsive, and follow accessibility guidelines. Experiment with colors, toggle icons, or animations to match your design, and test for usability across devices. Note that actual dropdown functionality would require JavaScript. Feel free to leave comments with any questions or suggestions!