Styling Forms & Buttons

Styling inputs

Inputs accept padding, borders, radius and width like any box. Add a :focus style so users see which field is active.

<style>
  .field {
    width: 100%; box-sizing: border-box; padding: 12px;
    border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; margin-bottom: 12px;
  }
  .field:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px #c7d2fe; }
</style>
<input class="field" type="text" placeholder="Your name">
<input class="field" type="email" placeholder="Your email">

An input is just a box, so it takes the same properties you already know: .field gives it full width, padding, a soft border and rounded corners (with box-sizing: border-box so the padding does not blow out the width). The clever part is .field:focus — it only applies while you are typing in that field. It removes the browser’s default outline and replaces it with a coloured border plus a soft box-shadow “ring”, so the active field is obvious. Click into a field in the preview to see the ring appear.

Buttons

A good button reacts to the user: it looks one way at rest, another when the mouse hovers, and a third the instant it is pressed. The code below builds exactly that — a primary button plus an “outline” variant — using three states. Read it, then see each state explained below:

<style>
  .btn {
    background: #4338ca; color: #fff; border: none; cursor: pointer;
    padding: 12px 22px; border-radius: 10px; font-size: 15px; font-weight: 600;
    transition: background .2s, transform .1s;
  }
  .btn:hover { background: #3730a3; }
  .btn:active { transform: translateY(1px); }
  .btn.outline { background: #fff; color:#4338ca; border:2px solid #4338ca; }
</style>
<button class="btn">Primary</button>
<button class="btn outline">Outline</button>

The button gets three states so it feels alive:

• .btn — the resting look: indigo background, white bold text, no border, rounded corners, and cursor: pointer so the mouse shows a hand. The transition makes its state changes smooth.
• .btn:hover — darkens the background when the mouse is over it, signalling “you can click this”.
• .btn:active — fires the instant it is pressed, nudging it down 1px with translateY(1px) so it feels physically clicked.
• .btn.outline — a second style (an element with both btn and outline classes) that swaps to a white background with an indigo border, for a secondary “ghost” button.