CSS Banners & Alerts 05 / 14
Inline Form Validation Alert CSS
Inline form validation alerts in a brutalist / raw industrial aesthetic — grid paper texture, IBM Plex Mono throughout, black heavy borders with offset box shadow.
Best forregistration forms, signup flows, account validation, dev-tool input dialogs.
The code
<section class="ba-frm" aria-label="Inline form validation demo">
<div class="form-shell" role="form" aria-label="Registration form">
<div class="form-header">
<span class="form-header-title">Create Account</span>
<span class="form-header-meta">FORM · V2.4</span>
</div>
<div class="form-error-summary" role="alert" aria-live="polite">
<div class="form-error-summary__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
<div>
<div class="form-error-summary__title">3 errors prevented submission</div>
<ul class="form-error-summary__list">
<li>Email address is already registered</li>
<li>Password does not meet complexity requirements</li>
<li>Terms of service must be accepted</li>
</ul>
</div>
</div>
<div class="form-body">
<div class="field field--success">
<div class="field-label">Full name <span class="required-mark">*</span><span class="field-index">01</span></div>
<input class="field-input" type="text" value="Margot Vaillancourt" readonly>
<div class="validation-msg validation-msg--success" data-code="OK_200">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Looks good</span><span class="validation-msg__detail">Name is valid and matches our formatting requirements.</span></div>
</div>
</div>
<div class="field field--error">
<div class="field-label">Email address <span class="required-mark">*</span><span class="field-index">02</span></div>
<input class="field-input" type="email" value="[email protected]" readonly>
<div class="validation-msg validation-msg--error" data-code="ERR_409">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Email already registered</span><span class="validation-msg__detail">An account with this address exists. Try signing in instead, or use a different email.</span></div>
</div>
</div>
<div class="field field--warning">
<div class="field-label">Password <span class="required-mark">*</span><span class="field-index">03</span></div>
<input class="field-input" type="password" value="hunter2024" readonly>
<div class="strength-bar" aria-hidden="true">
<span class="filled-warning"></span><span class="filled-warning"></span><span></span><span></span>
</div>
<div class="validation-msg validation-msg--warning" data-code="WARN_PWD">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Weak password — strength: fair</span><span class="validation-msg__detail">Add uppercase letters, symbols, or increase length to 12+ characters for a stronger password.</span></div>
</div>
</div>
<div class="field">
<div class="field-label">Username <span class="field-index">04</span></div>
<input class="field-input" type="text" placeholder="Choose a unique handle…" readonly>
<div class="validation-msg validation-msg--hint" data-code="INFO">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Username requirements</span><span class="validation-msg__detail">3–20 characters. Letters, numbers, underscores only. Must not start with a number.</span></div>
</div>
</div>
</div>
<div class="form-footer">
<p class="form-note">* Required fields.<br>Secure · Encrypted · No spam.</p>
<button class="submit-btn" type="button">Submit →</button>
</div>
</div>
</section> <section class="ba-frm" aria-label="Inline form validation demo">
<div class="form-shell" role="form" aria-label="Registration form">
<div class="form-header">
<span class="form-header-title">Create Account</span>
<span class="form-header-meta">FORM · V2.4</span>
</div>
<div class="form-error-summary" role="alert" aria-live="polite">
<div class="form-error-summary__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
<div>
<div class="form-error-summary__title">3 errors prevented submission</div>
<ul class="form-error-summary__list">
<li>Email address is already registered</li>
<li>Password does not meet complexity requirements</li>
<li>Terms of service must be accepted</li>
</ul>
</div>
</div>
<div class="form-body">
<div class="field field--success">
<div class="field-label">Full name <span class="required-mark">*</span><span class="field-index">01</span></div>
<input class="field-input" type="text" value="Margot Vaillancourt" readonly>
<div class="validation-msg validation-msg--success" data-code="OK_200">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Looks good</span><span class="validation-msg__detail">Name is valid and matches our formatting requirements.</span></div>
</div>
</div>
<div class="field field--error">
<div class="field-label">Email address <span class="required-mark">*</span><span class="field-index">02</span></div>
<input class="field-input" type="email" value="[email protected]" readonly>
<div class="validation-msg validation-msg--error" data-code="ERR_409">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Email already registered</span><span class="validation-msg__detail">An account with this address exists. Try signing in instead, or use a different email.</span></div>
</div>
</div>
<div class="field field--warning">
<div class="field-label">Password <span class="required-mark">*</span><span class="field-index">03</span></div>
<input class="field-input" type="password" value="hunter2024" readonly>
<div class="strength-bar" aria-hidden="true">
<span class="filled-warning"></span><span class="filled-warning"></span><span></span><span></span>
</div>
<div class="validation-msg validation-msg--warning" data-code="WARN_PWD">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Weak password — strength: fair</span><span class="validation-msg__detail">Add uppercase letters, symbols, or increase length to 12+ characters for a stronger password.</span></div>
</div>
</div>
<div class="field">
<div class="field-label">Username <span class="field-index">04</span></div>
<input class="field-input" type="text" placeholder="Choose a unique handle…" readonly>
<div class="validation-msg validation-msg--hint" data-code="INFO">
<div class="validation-msg__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></div>
<div class="validation-msg__content"><span class="validation-msg__title">Username requirements</span><span class="validation-msg__detail">3–20 characters. Letters, numbers, underscores only. Must not start with a number.</span></div>
</div>
</div>
</div>
<div class="form-footer">
<p class="form-note">* Required fields.<br>Secure · Encrypted · No spam.</p>
<button class="submit-btn" type="button">Submit →</button>
</div>
</div>
</section>/* ─── 05 Inline Form Validation Alert — brutalist industrial ──── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Syne:wght@700;800&display=swap');
.ba-frm {
--ba-frm-bg: #f2f0ec; --ba-frm-surface: #ffffff; --ba-frm-ink: #111111; --ba-frm-muted: #888;
--ba-frm-err-bg: #fff5f5; --ba-frm-err-line: #e02020; --ba-frm-err-text: #c00;
--ba-frm-ok-bg: #f5fff8; --ba-frm-ok-line: #18a050; --ba-frm-ok-text: #0d7038;
--ba-frm-warn-bg: #fffbf0; --ba-frm-warn-line: #e09000; --ba-frm-warn-text: #986000;
--ba-frm-hint-bg: #f5f8ff; --ba-frm-hint-line: #3060d0; --ba-frm-hint-text: #204090;
position: relative;
width: 100%;
min-height: 760px;
background: var(--ba-frm-bg);
background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px), repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 16px;
font-family: 'IBM Plex Mono', monospace;
box-sizing: border-box;
}
.ba-frm *, .ba-frm *::before, .ba-frm *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-frm .form-shell { background: var(--ba-frm-surface); border: 2px solid var(--ba-frm-ink); width: 100%; max-width: 520px; box-shadow: 6px 6px 0 var(--ba-frm-ink); position: relative; }
.ba-frm .form-header { background: var(--ba-frm-ink); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.ba-frm .form-header-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-frm .form-header-meta { font-size: 10px; opacity: 0.45; letter-spacing: 0.12em; }
.ba-frm .form-body { padding: 24px 24px 28px; }
.ba-frm .field { display: flex; flex-direction: column; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 18px 0; }
.ba-frm .field:first-child { padding-top: 0; } .ba-frm .field:last-child { border-bottom: none; }
.ba-frm .field-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ba-frm-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ba-frm .field-label .required-mark { color: var(--ba-frm-err-line); font-size: 11px; line-height: 1; }
.ba-frm .field-label .field-index { font-size: 9px; opacity: 0.3; margin-left: auto; font-weight: 400; }
.ba-frm .field-input { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 400; color: var(--ba-frm-ink); background: transparent; border: none; border-bottom: 2px solid var(--ba-frm-ink); padding: 6px 0 8px; outline: none; transition: border-color 0.2s; }
.ba-frm .field-input::placeholder { color: rgba(0,0,0,0.22); font-style: italic; }
.ba-frm .field--error .field-input { border-color: var(--ba-frm-err-line); }
.ba-frm .field--success .field-input { border-color: var(--ba-frm-ok-line); }
.ba-frm .field--warning .field-input { border-color: var(--ba-frm-warn-line); }
.ba-frm .validation-msg { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 10px; border-left: 3px solid; font-size: 11.5px; line-height: 1.55; position: relative; overflow: hidden; animation: ba-frm-popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ba-frm-popIn { from { opacity: 0; transform: translateY(-4px) scaleY(0.9); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.ba-frm .validation-msg::before { content: attr(data-code); position: absolute; top: 8px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.35; }
.ba-frm .validation-msg__icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ba-frm .validation-msg__icon svg { width: 15px; height: 15px; }
.ba-frm .validation-msg__title { font-weight: 700; margin-bottom: 2px; display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.ba-frm .validation-msg__detail { font-size: 11px; font-weight: 400; opacity: 0.8; font-style: italic; }
.ba-frm .validation-msg--error { background: var(--ba-frm-err-bg); border-color: var(--ba-frm-err-line); color: var(--ba-frm-err-text); }
.ba-frm .validation-msg--success { background: var(--ba-frm-ok-bg); border-color: var(--ba-frm-ok-line); color: var(--ba-frm-ok-text); }
.ba-frm .validation-msg--warning { background: var(--ba-frm-warn-bg); border-color: var(--ba-frm-warn-line); color: var(--ba-frm-warn-text); }
.ba-frm .validation-msg--hint { background: var(--ba-frm-hint-bg); border-color: var(--ba-frm-hint-line); color: var(--ba-frm-hint-text); }
.ba-frm .strength-bar { height: 3px; background: rgba(0,0,0,0.08); margin-top: 8px; display: flex; gap: 2px; overflow: hidden; }
.ba-frm .strength-bar span { flex: 1; background: #ddd; transition: background 0.3s; }
.ba-frm .strength-bar span.filled-warning { background: var(--ba-frm-warn-line); }
.ba-frm .form-footer { background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.08); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ba-frm .form-error-summary { background: #fff0f0; border: 2px solid var(--ba-frm-err-line); padding: 14px 16px; margin: 0 24px; display: flex; align-items: flex-start; gap: 12px; animation: ba-frm-popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; }
.ba-frm .form-error-summary__icon { color: var(--ba-frm-err-line); }
.ba-frm .form-error-summary__icon svg { width: 18px; height: 18px; }
.ba-frm .form-error-summary__title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-frm-err-text); margin-bottom: 6px; }
.ba-frm .form-error-summary__list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ba-frm .form-error-summary__list li { font-size: 11px; color: var(--ba-frm-err-text); display: flex; align-items: center; gap: 6px; opacity: 0.8; }
.ba-frm .form-error-summary__list li::before { content: '›'; font-size: 14px; line-height: 1; }
.ba-frm .submit-btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; background: var(--ba-frm-ink); color: #fff; border: 2px solid var(--ba-frm-ink); cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.ba-frm .submit-btn:hover { background: transparent; color: var(--ba-frm-ink); }
.ba-frm .form-note { font-size: 10px; color: var(--ba-frm-muted); letter-spacing: 0.06em; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ba-frm .validation-msg, .ba-frm .form-error-summary { animation: none; } } /* ─── 05 Inline Form Validation Alert — brutalist industrial ──── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Syne:wght@700;800&display=swap');
.ba-frm {
--ba-frm-bg: #f2f0ec; --ba-frm-surface: #ffffff; --ba-frm-ink: #111111; --ba-frm-muted: #888;
--ba-frm-err-bg: #fff5f5; --ba-frm-err-line: #e02020; --ba-frm-err-text: #c00;
--ba-frm-ok-bg: #f5fff8; --ba-frm-ok-line: #18a050; --ba-frm-ok-text: #0d7038;
--ba-frm-warn-bg: #fffbf0; --ba-frm-warn-line: #e09000; --ba-frm-warn-text: #986000;
--ba-frm-hint-bg: #f5f8ff; --ba-frm-hint-line: #3060d0; --ba-frm-hint-text: #204090;
position: relative;
width: 100%;
min-height: 760px;
background: var(--ba-frm-bg);
background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px), repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 40px);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 16px;
font-family: 'IBM Plex Mono', monospace;
box-sizing: border-box;
}
.ba-frm *, .ba-frm *::before, .ba-frm *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ba-frm .form-shell { background: var(--ba-frm-surface); border: 2px solid var(--ba-frm-ink); width: 100%; max-width: 520px; box-shadow: 6px 6px 0 var(--ba-frm-ink); position: relative; }
.ba-frm .form-header { background: var(--ba-frm-ink); color: #fff; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
.ba-frm .form-header-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-frm .form-header-meta { font-size: 10px; opacity: 0.45; letter-spacing: 0.12em; }
.ba-frm .form-body { padding: 24px 24px 28px; }
.ba-frm .field { display: flex; flex-direction: column; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 18px 0; }
.ba-frm .field:first-child { padding-top: 0; } .ba-frm .field:last-child { border-bottom: none; }
.ba-frm .field-label { font-size: 9px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ba-frm-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ba-frm .field-label .required-mark { color: var(--ba-frm-err-line); font-size: 11px; line-height: 1; }
.ba-frm .field-label .field-index { font-size: 9px; opacity: 0.3; margin-left: auto; font-weight: 400; }
.ba-frm .field-input { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 400; color: var(--ba-frm-ink); background: transparent; border: none; border-bottom: 2px solid var(--ba-frm-ink); padding: 6px 0 8px; outline: none; transition: border-color 0.2s; }
.ba-frm .field-input::placeholder { color: rgba(0,0,0,0.22); font-style: italic; }
.ba-frm .field--error .field-input { border-color: var(--ba-frm-err-line); }
.ba-frm .field--success .field-input { border-color: var(--ba-frm-ok-line); }
.ba-frm .field--warning .field-input { border-color: var(--ba-frm-warn-line); }
.ba-frm .validation-msg { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 10px; border-left: 3px solid; font-size: 11.5px; line-height: 1.55; position: relative; overflow: hidden; animation: ba-frm-popIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ba-frm-popIn { from { opacity: 0; transform: translateY(-4px) scaleY(0.9); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.ba-frm .validation-msg::before { content: attr(data-code); position: absolute; top: 8px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.35; }
.ba-frm .validation-msg__icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ba-frm .validation-msg__icon svg { width: 15px; height: 15px; }
.ba-frm .validation-msg__title { font-weight: 700; margin-bottom: 2px; display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.ba-frm .validation-msg__detail { font-size: 11px; font-weight: 400; opacity: 0.8; font-style: italic; }
.ba-frm .validation-msg--error { background: var(--ba-frm-err-bg); border-color: var(--ba-frm-err-line); color: var(--ba-frm-err-text); }
.ba-frm .validation-msg--success { background: var(--ba-frm-ok-bg); border-color: var(--ba-frm-ok-line); color: var(--ba-frm-ok-text); }
.ba-frm .validation-msg--warning { background: var(--ba-frm-warn-bg); border-color: var(--ba-frm-warn-line); color: var(--ba-frm-warn-text); }
.ba-frm .validation-msg--hint { background: var(--ba-frm-hint-bg); border-color: var(--ba-frm-hint-line); color: var(--ba-frm-hint-text); }
.ba-frm .strength-bar { height: 3px; background: rgba(0,0,0,0.08); margin-top: 8px; display: flex; gap: 2px; overflow: hidden; }
.ba-frm .strength-bar span { flex: 1; background: #ddd; transition: background 0.3s; }
.ba-frm .strength-bar span.filled-warning { background: var(--ba-frm-warn-line); }
.ba-frm .form-footer { background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.08); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ba-frm .form-error-summary { background: #fff0f0; border: 2px solid var(--ba-frm-err-line); padding: 14px 16px; margin: 0 24px; display: flex; align-items: flex-start; gap: 12px; animation: ba-frm-popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; }
.ba-frm .form-error-summary__icon { color: var(--ba-frm-err-line); }
.ba-frm .form-error-summary__icon svg { width: 18px; height: 18px; }
.ba-frm .form-error-summary__title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ba-frm-err-text); margin-bottom: 6px; }
.ba-frm .form-error-summary__list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ba-frm .form-error-summary__list li { font-size: 11px; color: var(--ba-frm-err-text); display: flex; align-items: center; gap: 6px; opacity: 0.8; }
.ba-frm .form-error-summary__list li::before { content: '›'; font-size: 14px; line-height: 1; }
.ba-frm .submit-btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; background: var(--ba-frm-ink); color: #fff; border: 2px solid var(--ba-frm-ink); cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.ba-frm .submit-btn:hover { background: transparent; color: var(--ba-frm-ink); }
.ba-frm .form-note { font-size: 10px; color: var(--ba-frm-muted); letter-spacing: 0.06em; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ba-frm .validation-msg, .ba-frm .form-error-summary { animation: none; } }More from CSS Banners & Alerts
Minimalist Border Left CSS AlertResponsive Full Width Hero Banner CSSMaterial Design Floating Alert CardCSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundCSS Gradient Animated Border AlertSemantic Bootstrap-style Alerts CSS
View the full collection →