Secondary Button Component

Overview

A lighter-colored button, which is less prominent than the primary and default buttons.

preview

JSX

index.jsx

export const SecondaryButton = () => (
  <button className="btn secondary">Secondary</button>
);

HTML

index.html

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

css

styles.css

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

.btn.secondary {
  background-color: #333333;
  color: white;
}

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

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