Danger Button Component

Overview

A button with a red background, indicating a potentially risky action.

preview

JSX

index.jsx

export const DangerButton = () => (
  <button className="btn danger">Danger</button>
);

HTML

index.html

<button class="btn danger">Danger</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);
}