A trust badge login form built with pure HTML and CSS that integrates visible security indicators such as badges or icons. It enhances user confidence and authentication trust clarity within login interfaces.
Usage
Use this component when interfaces require security reassurance elements, such as payment logins, SaaS platforms, banking interfaces, or authentication pages where trust signals improve user confidence.
Implementation
The layout is implemented using structured form containers combined with badge or icon placement, styled using CSS for alignment, spacing, and visual emphasis. Responsive rules ensure consistent display across screen sizes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Trust Badge Login Form</title>
<link rel="stylesheet" href="trust-badge-login.css" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
</head>
<body>
<div class="page-bg">
<div class="bg-blob blob-1"></div>
<div class="bg-blob blob-2"></div>
<div class="bg-blob blob-3"></div>
</div>
<div class="wrapper">
<div class="card">
<!-- Secure Verified Ribbon -->
<div class="ribbon">
<span class="ribbon-star">★</span>
Verified Secure
</div>
<!-- Header -->
<div class="header">
<div class="logo-ring">
<span class="logo-emoji">🔐</span>
</div>
<h1 class="card-title">Welcome back</h1>
<p class="card-sub">Sign in to your secure account</p>
</div>
<!-- Trust Badges -->
<div class="trust-strip">
<div class="trust-badge">
<span class="badge-icon">🔒</span>
<span class="badge-label">256-bit SSL</span>
</div>
<div class="trust-badge">
<span class="badge-icon">🛡️</span>
<span class="badge-label">2FA Ready</span>
</div>
<div class="trust-badge">
<span class="badge-icon">✅</span>
<span class="badge-label">ISO 27001</span>
</div>
</div>
<!-- Divider -->
<div class="divider">
<span class="divider-text">Sign in with credentials</span>
</div>
<!-- Form -->
<form class="login-form" action="#" method="post">
<div class="form-group">
<label for="email">Email address</label>
<div class="input-wrap">
<span class="input-icon">✉</span>
<input type="email" id="email" name="email"
placeholder="you@example.com" autocomplete="email" />
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-wrap">
<span class="input-icon">🔑</span>
<input type="password" id="password" name="password"
placeholder="••••••••••••" autocomplete="current-password" />
</div>
</div>
<div class="form-row">
<label class="remember-wrap">
<input type="checkbox" id="remember" name="remember" />
<span class="custom-check"></span>
<span class="remember-label">Keep me signed in</span>
</label>
<a href="#" class="forgot-link">Forgot password?</a>
</div>
<button class="btn-login" type="submit">
Sign In Securely →
</button>
</form>
<p class="signup-row">
No account yet? <a href="#">Create one free</a>
</p>
<!-- Footer Trust Row -->
<div class="footer-trust">
<span class="ft-item"><span class="ft-icon">🔒</span>Encrypted</span>
<span class="ft-dot">·</span>
<span class="ft-item"><span class="ft-icon">🇪🇺</span>GDPR</span>
<span class="ft-dot">·</span>
<span class="ft-item"><span class="ft-icon">🚫</span>No data selling</span>
</div>
</div>
</div>
</body>
</html>CSS
/* ============================================
Trust Badge Login — Light Mode
Font: Playfair Display + Nunito
============================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: #f0f4f8;
--card: #ffffff;
--card-shadow: rgba(99, 120, 160, 0.14);
--border: #e2e8f2;
--border-focus: #3b82f6;
--input-bg: #f8fafd;
--input-border: #dce4f0;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--accent-glow: rgba(37, 99, 235, 0.18);
--accent-light: #dbeafe;
--gold: #d97706;
--gold-bg: #fef3c7;
--gold-border: #fcd34d;
--green: #059669;
--green-bg: #ecfdf5;
--green-border: #a7f3d0;
--text-primary: #1e293b;
--text-secondary: #475569;
--text-muted: #94a3b8;
--badge-bg: #f0fdf4;
--badge-border: #bbf7d0;
--badge-text: #047857;
--radius-card: 20px;
--radius-input: 10px;
--radius-btn: 12px;
--radius-badge: 12px;
}
/* ─── Base ─── */
body {
font-family: 'Nunito', sans-serif;
background: var(--bg);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
overflow: hidden;
}
/* ─── Background blobs ─── */
.page-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
}
.blob-1 {
width: 520px;
height: 520px;
background: radial-gradient(circle, #bfdbfe, #ede9fe);
top: -160px;
left: -140px;
}
.blob-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, #d1fae5, #a7f3d0);
bottom: -100px;
right: -100px;
}
.blob-3 {
width: 300px;
height: 300px;
background: radial-gradient(circle, #fef9c3, #fde68a);
top: 40%;
left: 60%;
}
/* ─── Wrapper ─── */
.wrapper {
width: 100%;
max-width: 460px;
position: relative;
z-index: 1;
animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Card ─── */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 2.75rem 2.5rem 2rem;
position: relative;
box-shadow:
0 1px 3px rgba(0,0,0,0.05),
0 8px 24px var(--card-shadow),
0 32px 56px rgba(99, 120, 160, 0.08);
}
/* Subtle top shimmer line */
.card::before {
content: '';
position: absolute;
top: 0; left: 16px; right: 16px;
height: 2px;
background: linear-gradient(90deg, transparent, #93c5fd 30%, #6ee7b7 70%, transparent);
border-radius: 0 0 4px 4px;
opacity: 0.7;
}
/* ─── Ribbon ─── */
.ribbon {
position: absolute;
top: -1px;
right: 28px;
background: linear-gradient(135deg, #d97706, #f59e0b);
color: #fff;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 0.8rem 0.55rem;
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
gap: 0.3rem;
box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.ribbon-star {
font-size: 9px;
opacity: 0.9;
}
/* ─── Header ─── */
.header {
text-align: center;
margin-bottom: 2rem;
}
.logo-ring {
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(145deg, #eff6ff, #dbeafe);
border: 1.5px solid #bfdbfe;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
box-shadow:
0 0 0 6px rgba(59, 130, 246, 0.07),
0 4px 16px rgba(37, 99, 235, 0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo-ring:hover {
transform: scale(1.05) rotate(-2deg);
box-shadow:
0 0 0 8px rgba(59, 130, 246, 0.1),
0 8px 24px rgba(37, 99, 235, 0.18);
}
.logo-emoji {
font-size: 28px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(37,99,235,0.2));
}
.card-title {
font-family: 'Playfair Display', serif;
font-size: 1.7rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.15;
}
.card-sub {
margin-top: 0.4rem;
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 400;
}
/* ─── Trust Badge Strip ─── */
.trust-strip {
display: flex;
gap: 0.6rem;
margin-bottom: 1.75rem;
}
.trust-badge {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.8rem 0.5rem;
background: var(--badge-bg);
border: 1.5px solid var(--badge-border);
border-radius: var(--radius-badge);
animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
transition: transform 0.2s, box-shadow 0.2s;
}
.trust-badge:nth-child(1) { animation-delay: 0.1s; }
.trust-badge:nth-child(2) { animation-delay: 0.18s; }
.trust-badge:nth-child(3) { animation-delay: 0.26s; }
.trust-badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(5, 150, 105, 0.12);
}
.badge-icon {
font-size: 18px;
line-height: 1;
}
.badge-label {
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--badge-text);
text-align: center;
line-height: 1.3;
}
/* ─── Divider ─── */
.divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.divider-text {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
/* ─── Form ─── */
.form-group {
margin-bottom: 1.1rem;
}
label {
display: block;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 0.45rem;
letter-spacing: 0.01em;
}
.input-wrap {
position: relative;
}
.input-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s;
z-index: 1;
}
.input-wrap:focus-within .input-icon {
opacity: 0.75;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 0.78rem 1rem 0.78rem 2.55rem;
background: var(--input-bg);
border: 1.5px solid var(--input-border);
border-radius: var(--radius-input);
color: var(--text-primary);
font-family: 'Nunito', sans-serif;
font-size: 0.9rem;
font-weight: 500;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input::placeholder {
color: var(--text-muted);
font-weight: 400;
}
input:focus {
border-color: var(--border-focus);
background: #ffffff;
box-shadow: 0 0 0 3.5px var(--accent-glow);
}
/* ─── Row: Remember + Forgot ─── */
.form-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
margin-top: 0.25rem;
}
.remember-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
/* Hide native checkbox */
.remember-wrap input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Custom checkbox */
.custom-check {
width: 17px;
height: 17px;
border-radius: 5px;
border: 1.5px solid var(--input-border);
background: var(--input-bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.custom-check::after {
content: '';
width: 4px;
height: 7px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg) scale(0);
transition: transform 0.15s ease;
position: absolute;
top: 2px;
}
.remember-wrap input[type="checkbox"]:checked ~ .custom-check {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.remember-wrap input[type="checkbox"]:checked ~ .custom-check::after {
transform: rotate(45deg) scale(1);
}
.remember-label {
font-size: 0.82rem;
color: var(--text-secondary);
font-weight: 500;
}
.forgot-link {
font-size: 0.82rem;
color: var(--accent);
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.forgot-link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* ─── Login Button ─── */
.btn-login {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
padding: 0.9rem 1.5rem;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #ffffff;
font-family: 'Nunito', sans-serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
border: none;
border-radius: var(--radius-btn);
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s;
box-shadow:
0 4px 14px rgba(37, 99, 235, 0.35),
0 1px 2px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Shimmer sweep */
.btn-login::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
transition: left 0.55s ease;
}
.btn-login:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow:
0 8px 28px rgba(37, 99, 235, 0.45),
0 2px 4px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-login:hover::before {
left: 160%;
}
.btn-login:active {
transform: translateY(0);
}
/* ─── Sign Up Row ─── */
.signup-row {
text-align: center;
margin-top: 1.4rem;
font-size: 0.84rem;
color: var(--text-muted);
font-weight: 500;
}
.signup-row a {
color: var(--accent);
text-decoration: none;
font-weight: 700;
transition: color 0.2s;
}
.signup-row a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* ─── Footer Trust Row ─── */
.footer-trust {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
flex-wrap: wrap;
}
.ft-item {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.71rem;
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.01em;
}
.ft-icon {
font-size: 12px;
}
.ft-dot {
color: var(--border);
font-size: 1rem;
line-height: 1;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Includes visual trust indicators
- Enhances user confidence and credibility perception
- Fully responsive across breakpoints
- Suitable for secure login interfaces
- Easy to customize badge style and placement
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.