Primary Button Component

Overview

This variant is for primary actions and has a distinct blue background.

preview

JSX

index.jsx

export const PrimaryButton = () => (
  <button className="btn primary">Primary</button>
);

HTML

index.html

<button class="btn primary">Primary</button>

css

styles.css

:root {
  --primary-color: #ae47fe;
}

.btn {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.btn.primary:hover {
  filter: brightness(1.1);
}

.btn.primary:active {
  filter: brightness(0.9);
  transform: scale(0.9);
}