CSS Forms & UI Component Styling | Buttons, Inputs & Layouts

Forms and UI components are the backbone of real websites. A good UI is not about colors alone, but about spacing, states, consistency, and feedback.

This guide focuses on practical, reusable UI patterns you will actually use in projects. Every example is styled cleanly and built with real-world logic.

1. Buttons (Primary, Secondary, States)

Buttons should clearly communicate action, hierarchy, and feedback.

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn danger">Delete</button>

<style>
.btn {
  padding: 14px 26px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.primary { background: #6366f1; color: white; }
.secondary { background: #e5e7eb; color: #111827; }
.danger { background: #ef4444; color: white; }
</style>

Explanation: Buttons use elevation and motion to feel clickable and responsive.

2. Inputs & Form Fields

Inputs should feel calm, readable, and provide focus feedback.

<div class="field">
  <label>Email</label>
  <input type="email" placeholder="you@example.com"/>
</div>

<style>
.field {
  max-width: 320px;
  font-family: sans-serif;
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #374151;
}

input {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  outline: none;
  transition: border .2s ease, box-shadow .2s ease;
}

input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px #6366f133;
}
</style>

Explanation: Focus rings improve usability and accessibility.

3. Cards (Content Containers)

Cards group related content and actions.

<div class="ui-card">
  <div class="badge">PRO</div>

  <img class="thumb" src="https://picsum.photos/400/240" alt="Preview"/>

  <div class="card-body">
    <h3>Premium Access</h3>
    <p>Unlock advanced features, priority support, and exclusive content.</p>

    <div class="actions">
      <button class="btn primary">Upgrade</button>
      <button class="btn ghost">Learn More</button>
    </div>
  </div>
</div>

<style>
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

/* Card */
.ui-card {
  position: relative;
  max-width: 340px;
  border-radius: 22px;
  overflow: hidden;
  background: white;
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
  transition: transform .3s ease, box-shadow .3s ease;
}

.ui-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 80px rgba(0,0,0,.18);
}

/* Badge */
.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}

/* Image */
.thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Content */
.card-body {
  padding: 22px;
}

.card-body h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.card-body p {
  margin: 0 0 18px;
  font-size: 14px;
  color: #475569;
}

/* Actions */
.actions {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 12px 18px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
}

.ghost {
  background: transparent;
  border: 2px solid #e5e7eb;
  color: #111827;
}

.primary:hover {
  box-shadow: 0 12px 26px rgba(79,70,229,.45);
}

.ghost:hover {
  border-color: #6366f1;
  color: #6366f1;
}
</style>

Explanation: Cards use padding, radius, and shadow for visual separation.

4. Navigation Bar

Navbars organize navigation and branding.

<nav class="navbar">
  <span class="logo">Brand</span>
  <div class="links">
    <a>Home</a>
    <a>Docs</a>
    <a>Contact</a>
  </div>
</nav>

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: #111827;
  color: white;
  border-radius: 14px;
  font-family: sans-serif;
}

.links a {
  margin-left: 18px;
  cursor: pointer;
  opacity: .8;
}

.links a:hover {
  opacity: 1;
}
</style>

Explanation: Flexbox aligns logo and links cleanly.

5. Form Layout Pattern

Forms should be readable and structured.

<div class="form-card">
  <h3>Create your account</h3>
  <p>Start your journey in just a few seconds</p>

  <form class="form">
    <div class="field">
      <label>Name</label>
      <input type="text" placeholder="John Doe"/>
    </div>

    <div class="field">
      <label>Email</label>
      <input type="email" placeholder="john@example.com"/>
    </div>

    <button class="btn primary">Get Started</button>
  </form>
</div>

<style>
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

.form-card {
  max-width: 360px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 24px 50px rgba(0,0,0,.12);
}

.form-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.form-card p {
  margin: 0 0 22px;
  font-size: 14px;
  color: #475569;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #374151;
}

.field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  outline: none;
  font-size: 14px;
  transition: border .2s ease, box-shadow .2s ease;
}

.field input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,.25);
}

.btn {
  margin-top: 6px;
  padding: 14px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  transition: transform .2s ease, box-shadow .2s ease;
}

.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(79,70,229,.45);
}

.primary:active {
  transform: scale(.97);
}
</style>

Explanation: Vertical spacing improves scanability and reduces errors.

6. Simple UI Layout Pattern

A common pattern combining navbar, cards, and content.

<div class="dashboard">
  <aside class="sidebar">
    <h3>Dashboard</h3>
    <a class="active">Overview</a>
    <a>Analytics</a>
    <a>Users</a>
    <a>Settings</a>
  </aside>

  <main class="main">
    <header class="topbar">
      <span>Welcome back 👋</span>
      <button class="btn">New Report</button>
    </header>

    <section class="cards">
      <div class="card">
        <h4>Revenue</h4>
        <p>$24,560</p>
      </div>
      <div class="card">
        <h4>Users</h4>
        <p>1,284</p>
      </div>
      <div class="card">
        <h4>Orders</h4>
        <p>342</p>
      </div>
    </section>
  </main>
</div>

<style>
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
  gap: 20px;
  background: #f1f5f9;
  padding: 20px;
}

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, #111827, #1f2937);
  color: white;
  padding: 24px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.sidebar a {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  opacity: .85;
}

.sidebar a:hover,
.sidebar a.active {
  background: #6366f1;
  opacity: 1;
}

/* Main area */
.main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 18px 24px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  background: #6366f1;
  color: white;
  cursor: pointer;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.card {
  background: white;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}

.card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #475569;
}

.card p {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
</style>

Explanation: Grid handles structure, cards handle content.

Final Takeaway:

Buttons communicate action
Inputs need focus feedback
Cards group content
Navbars organize navigation
Layouts rely on Grid and Flexbox

Great UI is not decoration. It is clarity, consistency, and feedback.

Next lesson: CSS Architecture & Methodologies

Maxoncodes

CSS Forms & UI Component Styling | Buttons, Inputs & Layouts

1. Buttons (Primary, Secondary, States)

2. Inputs & Form Fields

3. Cards (Content Containers)

4. Navigation Bar

5. Form Layout Pattern

6. Simple UI Layout Pattern

Post a Comment

CSS Box Model Explained: Margin, Padding, Border & Sizing

Full Stack Web Developer Roadmap 2026

CSS Colors, Units & Typography Guide for Beginners

CSS Backgrounds, Borders & Visual Effects Guide

CSS Positioning & Z-Index Explained with Examples