Warning Button Component

Overview

A button with a yellow background, indicating a warning that might need attention.

preview

JSX

index.jsx

export const WarningButton = () => (
  <button className="btn warning">Warning</button>
);

HTML

index.html

<button class="btn warning">Warning</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: #dc3545;
  color: white;
}

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

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