39 lines
1.6 KiB
HTML
39 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Buttons</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 28px; box-sizing: border-box; display: flex; gap: 16px; align-items: center; font-family: var(--font-sans); flex-wrap: wrap; }
|
|
button { font: inherit; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border: 0; cursor: pointer; padding: 11px 22px; border-radius: 12px; letter-spacing: -0.005em; transition: background 160ms ease, color 160ms ease; }
|
|
|
|
/* Primary — secondary-fixed fill, no shadow */
|
|
.btn-primary { color: #fffcf7; background: #785f53; }
|
|
.btn-primary:hover { background: #6b5348; }
|
|
|
|
/* Secondary — surface-container-highest fill. Radical minimalism. Reads like a subtle indentation. */
|
|
.btn-secondary { background: #ddd6c3; color: #383831; box-shadow: inset 0 1px 0 rgba(56,56,49,0.05); }
|
|
.btn-secondary:hover { background: #d2cab4; }
|
|
|
|
/* Tertiary — filled warm-wheat. A distinct colored button, no underline. */
|
|
.btn-tertiary {
|
|
background: #d9c9a8;
|
|
color: #4a3a2f;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.btn-tertiary:hover { background: #cdbb95; gap: 10px; }
|
|
.btn-tertiary .arr { font-family: var(--font-serif); font-style: italic; font-size: 15px; transform: translateY(-1px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<button class="btn-primary">Open the archive</button>
|
|
<button class="btn-secondary">Cancel</button>
|
|
<button class="btn-tertiary">Learn more <span class="arr">→</span></button>
|
|
</div>
|
|
</body>
|
|
</html>
|