Skip to content
Learn Netverks

Lesson

Step 17/36 47% through track

buttons

Buttons

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
beginner

This lesson

This lesson teaches Buttons—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Buttons in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Buttons in your own words.

Buttons use the base button class plus palette and style modifiers: primary, secondary, success, alert, and shapes like hollow, clear, expanded (full width).

Semantics matter

Use <button type="button"> for actions and <a class="button"> for navigation. Size with tiny, small, or large. Group related controls with button-group—similar intent to Bootstrap button groups.

Important interview questions and answers

  1. Q: button vs button hollow?
    A: Solid buttons fill with the palette color; hollow buttons keep a transparent fill with a colored border—better on busy backgrounds.
  2. Q: expanded button?
    A: button expanded stretches to the full width of its container—common for mobile CTAs in marketing forms.

Self-check

  1. What two classes create a small success hollow button?
  2. Why prefer button over div for clickable actions?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • primary vs secondary when?
  • Expanded button a11y?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump