jp/web3-style-guide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pixel-btn-secondary variant

Browse Source
This commit is contained in:
jamie prince
2026-09-08 17:59:08 +01:00
parent 0fd41d311b
commit 3919ce76f2
1 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/css/web3-style.css
View File

@ -228,8 +228,35 @@ header .navbar-toggler {
.pixel-btn:active:not(:disabled) { transform: translateY(0); } .pixel-btn:active:not(:disabled) { transform: translateY(0); }
.pixel-btn:disabled { cursor: not-allowed; opacity: 0.45; } .pixel-btn:disabled { cursor: not-allowed; opacity: 0.45; }
/* Secondary variant — muted, ghost-style, no solid fill */
.pixel-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--btn-min-height);
padding: var(--btn-padding-y) var(--btn-padding-x);
border: 1px solid var(--color-border-input);
border-radius: var(--btn-radius);
background: transparent;
color: var(--color-text-body);
cursor: pointer;
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: 1;
transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease, opacity .15s ease;
}
.pixel-btn-secondary:hover:not(:disabled) {
border-color: var(--color-accent-blue-border);
color: var(--color-text-heading);
background: rgba(119, 148, 255, 0.07);
transform: translateY(-1px);
}
.pixel-btn-secondary:active:not(:disabled) { transform: translateY(0); }
.pixel-btn-secondary:disabled { cursor: not-allowed; opacity: 0.45; }
/* When nested in a form-group, align to start */ /* When nested in a form-group, align to start */
.form-group .pixel-btn { justify-self: start; } .form-group .pixel-btn { justify-self: start; }
.form-group .pixel-btn-secondary { justify-self: start; }
/* ========================================================================== /* ==========================================================================
Web3 Style Guide — Form Components Web3 Style Guide — Form Components
========================================================================== */ ========================================================================== */