76 lines
3.8 KiB
HTML
76 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Buttons" subtitle="3-step interaction: transparent → 20% tint → full flood + white" viewport="700x110" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; flex-direction: column; }
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-family: var(--font-body); font-size: 12px; font-weight: 700;
|
|
letter-spacing: 0.07em; text-transform: uppercase;
|
|
padding: 8px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: background var(--transition-hover), color var(--transition-hover), border-color var(--transition-hover);
|
|
}
|
|
.btn:active {
|
|
transition: background var(--transition-press), color var(--transition-press), border-color var(--transition-press);
|
|
}
|
|
|
|
/* Primary */
|
|
.btn-primary { background: var(--gold-dim); color: var(--bg-shell); border-color: var(--gold-dim); }
|
|
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
|
|
.btn-primary:active { background: var(--fg-heading); color: var(--bg-shell); border-color: var(--fg-heading); }
|
|
|
|
/* Secondary */
|
|
.btn-secondary { background: transparent; color: var(--fg-secondary); border-color: var(--border); }
|
|
.btn-secondary:hover { background: rgba(215,153,33,0.2); border-color: var(--gold-dim); color: var(--fg-body); }
|
|
.btn-secondary:active { background: var(--gold-bright); color: #fff; border-color: var(--gold-bright); }
|
|
|
|
/* Ghost */
|
|
.btn-ghost { background: transparent; color: var(--fg-caption); border-color: transparent; }
|
|
.btn-ghost:hover { background: var(--bg-active); color: var(--fg-body); }
|
|
.btn-ghost:active { background: var(--gold-dim); color: #fff; }
|
|
|
|
/* Danger */
|
|
.btn-danger { background: transparent; color: var(--red-bright); border-color: var(--red-dim); }
|
|
.btn-danger:hover { background: rgba(204,36,29,0.2); border-color: var(--red-bright); color: var(--fg-body); }
|
|
.btn-danger:active { background: var(--red-bright); color: #fff; border-color: var(--red-bright); }
|
|
|
|
/* Success */
|
|
.btn-success { background: transparent; color: var(--green-bright); border-color: var(--green-dim); }
|
|
.btn-success:hover { background: rgba(152,151,26,0.2); border-color: var(--green-bright); color: var(--fg-body); }
|
|
.btn-success:active { background: var(--green-bright); color: #fff; border-color: var(--green-bright); }
|
|
|
|
/* Disabled */
|
|
.btn-disabled { background: var(--bg-active); color: var(--fg-muted); border-color: var(--border); opacity: 0.5; cursor: not-allowed; pointer-events: none; }
|
|
|
|
/* Sizes */
|
|
.btn-sm { font-size: 10px; padding: 5px 12px; }
|
|
.btn-lg { font-size: 14px; padding: 11px 24px; }
|
|
|
|
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.row-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div><div class="row-label">variants</div>
|
|
<div class="row">
|
|
<button class="btn btn-primary">Execute</button>
|
|
<button class="btn btn-secondary">Configure</button>
|
|
<button class="btn btn-secondary">Dismiss</button>
|
|
<button class="btn btn-danger">Terminate</button>
|
|
<button class="btn btn-success">Deploy</button>
|
|
<button class="btn btn-disabled" disabled>Locked</button>
|
|
</div></div>
|
|
<div><div class="row-label">sizes</div>
|
|
<div class="row">
|
|
<button class="btn btn-primary btn-sm">Run</button>
|
|
<button class="btn btn-primary">Execute</button>
|
|
<button class="btn btn-primary btn-lg">Initialize System</button>
|
|
</div></div>
|
|
</body>
|
|
</html>
|