CSS Examples & Practice
CSS Examples
The fastest way to learn CSS is to run small, focused examples and tweak them. This gallery has eight self-contained snippets — button, card, navbar, badge, alert, loading spinner, tooltip and progress bar. Each is a complete HTML document, so you can copy it straight into the live editor and press Run.
1. Gradient button with hover
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
font-family:system-ui,sans-serif; background:#f1f5f9; }
.btn { padding:12px 26px; border:none; border-radius:10px; color:#fff;
font-weight:600; cursor:pointer;
background:linear-gradient(135deg,#0ea5e9,#6366f1);
transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-2px);
box-shadow:0 8px 20px rgba(99,102,241,.45); }
.btn:active { transform:translateY(0); }
</style></head>
<body><button class="btn">Click me</button></body>
</html>2. Profile card
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
background:#f8fafc; font-family:system-ui,sans-serif; }
.card { width:260px; background:#fff; border-radius:16px; overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.1); text-align:center; }
.card .cover { height:80px;
background:linear-gradient(135deg,#f59e0b,#ef4444); }
.card .avatar { width:72px; height:72px; border-radius:50%;
background:#fff; margin:-36px auto 0; border:4px solid #fff;
display:grid; place-items:center; font-size:28px; }
.card h3 { margin:12px 0 2px; }
.card p { color:#64748b; margin:0 0 16px; font-size:14px; }
</style></head>
<body>
<div class="card"><div class="cover"></div>
<div class="avatar">😀</div><h3>Priya Sharma</h3><p>Frontend Intern</p></div>
</body>
</html>3. Responsive navbar
Example
<!DOCTYPE html>
<html>
<head><style>
* { box-sizing:border-box; margin:0; }
body { font-family:system-ui,sans-serif; }
.nav { display:flex; align-items:center; gap:8px; padding:14px 20px;
background:#111827; color:#fff; }
.nav .brand { font-weight:800; margin-right:auto; }
.nav a { color:#d1d5db; text-decoration:none; padding:8px 12px;
border-radius:6px; }
.nav a:hover { background:#1f2937; color:#fff; }
.nav .cta { background:#22c55e; color:#052e16; font-weight:600; }
</style></head>
<body>
<div class="nav">
<span class="brand">DevHub</span>
<a href="#">Home</a><a href="#">Docs</a><a href="#">Blog</a>
<a class="cta" href="#">Sign up</a>
</div>
</body>
</html>4. Status badges
Example
<!DOCTYPE html>
<html>
<head><style>
body { font-family:system-ui,sans-serif; padding:32px; }
.badge { display:inline-block; font-size:13px; font-weight:600;
padding:4px 12px; border-radius:999px; margin:4px; }
.b-new { background:#dbeafe; color:#1e40af; }
.b-ok { background:#dcfce7; color:#166534; }
.b-warn{ background:#fef9c3; color:#854d0e; }
.b-hot { background:#fee2e2; color:#991b1b; }
</style></head>
<body>
<span class="badge b-new">New</span>
<span class="badge b-ok">Active</span>
<span class="badge b-warn">Pending</span>
<span class="badge b-hot">Closing soon</span>
</body>
</html>5. Alert messages
Example
<!DOCTYPE html>
<html>
<head><style>
body { font-family:system-ui,sans-serif; padding:24px; }
.alert { padding:12px 16px; border-radius:8px; margin:10px 0;
border-left:4px solid; font-size:15px; }
.a-info { background:#eff6ff; border-color:#3b82f6; color:#1e3a8a; }
.a-success { background:#f0fdf4; border-color:#22c55e; color:#14532d; }
.a-error { background:#fef2f2; border-color:#ef4444; color:#7f1d1d; }
</style></head>
<body>
<div class="alert a-info">Heads up — your profile is 80% complete.</div>
<div class="alert a-success">Application submitted successfully.</div>
<div class="alert a-error">Something went wrong. Please try again.</div>
</body>
</html>6. Loading spinner (pure CSS)
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
background:#0f172a; }
.spinner { width:52px; height:52px; border-radius:50%;
border:6px solid #334155; border-top-color:#38bdf8;
animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
</style></head>
<body><div class="spinner"></div></body>
</html>7. Tooltip on hover
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
font-family:system-ui,sans-serif; }
.tip { position:relative; border-bottom:2px dotted #0f766e;
cursor:help; font-weight:600; }
.tip::after { content:attr(data-tip); position:absolute; left:50%;
bottom:135%; transform:translateX(-50%);
background:#111827; color:#fff; padding:6px 10px;
border-radius:6px; font-size:13px; white-space:nowrap;
opacity:0; pointer-events:none; transition:opacity .15s; }
.tip:hover::after { opacity:1; }
</style></head>
<body>
<span class="tip" data-tip="Cascading Style Sheets">CSS</span>
</body>
</html>8. Animated progress bar
Example
<!DOCTYPE html>
<html>
<head><style>
body { display:grid; place-items:center; height:100vh; margin:0;
font-family:system-ui,sans-serif; background:#f8fafc; }
.track { width:280px; height:14px; background:#e2e8f0;
border-radius:999px; overflow:hidden; }
.fill { height:100%; width:0; border-radius:999px;
background:linear-gradient(90deg,#22c55e,#16a34a);
animation:load 2.5s ease forwards; }
@keyframes load { to { width:72%; } }
</style></head>
<body><div class="track"><div class="fill"></div></div></body>
</html>💡
Every example above uses only CSS — no JavaScript. Combine them (a card with a badge and a button) to build real UI components.