41 lines
1.6 KiB
HTML
41 lines
1.6 KiB
HTML
|
<!doctype html><html><head><meta charset="utf-8"><title>Buttons</title><link rel="stylesheet" href="_card.css"><style>
|
||
|
|
.intel-btn {
|
||
|
|
position: relative; overflow: hidden;
|
||
|
|
font: 600 13px/1 var(--font-mono);
|
||
|
|
letter-spacing: 0.5px; text-transform: uppercase;
|
||
|
|
padding: 10px 20px; border-radius: 6px;
|
||
|
|
border: 1px solid; cursor: pointer;
|
||
|
|
transition: all 0.3s;
|
||
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
background: linear-gradient(135deg, rgba(14,165,233,0.15) 0%, rgba(14,165,233,0.10) 100%);
|
||
|
|
border-color: var(--intel-accent); color: var(--intel-accent-bright);
|
||
|
|
text-shadow: 0 0 6px rgba(14,165,233,0.2);
|
||
|
|
}
|
||
|
|
.btn-danger {
|
||
|
|
background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(239,68,68,0.10) 100%);
|
||
|
|
border-color: var(--intel-danger); color: #F87171;
|
||
|
|
text-shadow: 0 0 6px rgba(239,68,68,0.2);
|
||
|
|
}
|
||
|
|
.btn-success {
|
||
|
|
background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.10) 100%);
|
||
|
|
border-color: var(--intel-success); color: #34D399;
|
||
|
|
text-shadow: 0 0 6px rgba(16,185,129,0.2);
|
||
|
|
}
|
||
|
|
.btn-ghost {
|
||
|
|
background: transparent; border-color: var(--border-default);
|
||
|
|
color: var(--text-muted); text-shadow: none;
|
||
|
|
}
|
||
|
|
</style></head><body>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-row" style="gap:10px">
|
||
|
|
<button class="intel-btn btn-primary">Sync</button>
|
||
|
|
<button class="intel-btn btn-success">Approve FP</button>
|
||
|
|
<button class="intel-btn btn-danger">Delete</button>
|
||
|
|
<button class="intel-btn btn-ghost">Cancel</button>
|
||
|
|
</div>
|
||
|
|
<div class="t-meta">Mono · uppercase · gradient fills · 1px brand-color border · soft text-glow.</div>
|
||
|
|
</div>
|
||
|
|
</body></html>
|