Leanpub Header

Skip to main content

The Designer's Guide to the Buttons

A History of Interfaces from Early Computers to Virtual Reality. In Search of a Universal Design System

This book is 100% completeLast updated on 2026-07-06

A practical, richly illustrated guide to interface components, patterns, and design systems — from Xerox Alto to Apple Vision Pro. Learn how buttons, forms, menus, tabs, and other UI elements evolved, and make better design decisions using 500+ real-world examples from 180 apps, websites, and design systems.

Minimum price

$19.00

$29.00

You pay

Author earns

$

Also available for 1 book credit with a Reader Membership

PDF
About

About

About the Book

The practical, richly illustrated guide for designers who want to make better interface decisions.

The Designer’s Guide to the Buttons is a practical guide to interface components, patterns, and design systems. It combines interface history, real-world examples, component anatomy, and design-system thinking to help designers understand not only how interfaces look, but why they work the way they do.

Every designer faces deceptively simple questions:

  • Should a button become brighter or darker on hover?
  • What is the best layout for a form?
  • How should a selected option be shown — with a checkmark, color, or both?
  • What is the difference between a dropdown list and a dropdown menu?
  • When should form fields be validated?
  • How many component states and variations does a real design system actually need?

This book helps answer questions like these by turning scattered interface knowledge into a clear, structured system.

Each chapter focuses on a specific interface component: buttons, checkboxes, radio buttons, text fields, dropdowns, menus, tabs, navigation, and more. The book traces how these elements evolved across desktop, web, and mobile interfaces — from early desktop metaphors in Xerox Alto to modern design systems and Apple Vision Pro AR interface.

Inside, you’ll find:

  • 500+ illustrations, screenshots, schemes, and examples of UX solutions
  • 180 popular apps, websites, and design systems analyzed and compared
  • Detailed chapters on the anatomy, states, styles, and variations of interface components
  • Practical dos and don’ts for building clearer, more consistent interfaces
  • 35 QR codes linking to additional articles, videos, and educational materials
  • A framework for thinking about and building a complete design system for desktop and mobile products

Designers often struggle to find reliable real-world examples when building interfaces. We search our memory, browse countless products, and try to remember where we once saw a similar solution. This book solves that problem by collecting hundreds of practical references in one place and explaining the design logic behind them.

It is useful for beginning designers who want to understand where familiar interface elements came from, and for experienced professionals who want to sharpen their visual literacy, improve component decisions, and build stronger design systems.

The Designer’s Guide to the Buttons is not just a history of interface design. It is a practical, illustrated guide to understanding how interfaces work — and how to design them better.

Share this book

Author

About the Author

Andrew Marcus

Andrew Marcus is a designer, writer, traveler, and recipient of international design awards.

His work has been recognized by the American Institute of Graphic Arts. He was named among the best designers of 2023 by CSS Design Awards. He is a contributing author to UX Collective.

Andrew has visited more than 95 countries, including Iran, Ethiopia, the Omo Valley, Mecca, remote desert regions, post-Soviet cities, religious sites, and politically complex societies.

His books combine a designer’s attention to systems and detail with a traveler’s interest in how places, societies, and cultures actually work.

Contents

Table of Contents

  • Part one. Desktop Interfaces
    • Chapter 1. Invention of the Button
      • Skeuomorph Attacks!
      • Ancient Buttons
      • Button States
      • Primary and Secondary Buttons
      • Enter Photoshop
      • UI Kits and Design Systems
      • Photoshop Exits. Enter Figma
      • Neomorphism
      • Liquid Glass
      • The Anatomy of a Button
      • Container
      • Left Icon
      • Right Icon
      • Counter
      • Button States
      • Focus Mode
      • Sizes
      • Component Matrix
      • Bringing it All Together
    • Chapter 2. Toggle Button
      • Component Matrix
    • Chapter 3. Checkbox
      • Statuses
      • Styles
      • Anatomy
      • Component Matrix
    • Chapter 4. Segmented Button
      • Multi-Select Segment
      • Anatomy
      • Component Matrix
    • Chapter 5. Radio Button
      • Anatomy
      • Directions for Use
      • Radio Checkbox
      • Component Matrix
    • Chapter 6. List Box
      • Multi-Select List Box
      • Searching a List
      • Anatomy
      • Component Matrix
    • Chapter 7. Dropdown List
      • Dropdowns Debunked
      • Dropdown Lists Best Practices
      • Searching a List
      • Combo Box
      • List Scrolling
      • Multi-Select Lists
      • Component Matrix
    • Chapter 8. Dropdown Menu
      • Ways to Open a Menu
      • Paper and Computer Menus
      • Anatomy
      • Classification of Menu Sections
      • 3D Menus
      • Left and Right
      • Searching a Menu
      • Component Matrix
    • Chapter 9. Text Field
      • Material Design’s Flying Circus
      • Anatomy
      • Placeholder
      • Icons
      • Password Fields
      • Input Mask
      • Segmented Field
      • Suggestion List and Combo Box
      • Text Area
      • Component Matrix
    • Chapter 10. Tabs
      • First-Level Tabs
      • Second-Level Tabs
      • Tabs of the Third and Fourth Levels
      • Segmented Button as Tabs
      • Vertical Tabs
      • Tab Overflow
      • Unusual Tab Designs
      • Anatomy
      • Component Matrix
    • Chapter 11. Other Components
      • Toggle
      • Split Button
      • Tag Input
      • Slider and Range
      • Calendar
    • Intermission
      • Form Design
      • Components Equivalence
      • The Adaptation Trap
  • Part two. Mobile Interfaces
    • Chapter 12. History of Mobile Interfaces
      • Newton
      • The Rest
      • iPod
    • Chapter 13. The Thumb Zone
    • Chapter 14. Mobile Lists
      • Anatomy
      • Component Matrix
    • Chapter 15. Mobile Button
      • Button as a List Item
      • Button Groups
      • Toggle Buttons
      • Floating Buttons
      • Anatomy
      • Component Matrix
    • Chapter 16. Checkbox, Radio Button, Toggle, Segmented Button, and List
      • Dropdown List
      • Multi-Select Lists
      • The Components
    • Chapter 17. Text Field
      • Suggestion Lists and Combo Boxes
      • Text Area
      • The Component
    • Chapter 18. Menus and Sheets
      • Ways to Open a Menu
      • Edit Menu
      • Sheets
      • The Components
    • Chapter 19. Tabs
      • Tab Bar
      • Minefield Interface
      • First-Level Tabs
      • Second-Level Tabs
      • Tabs of the Third and Fourth Levels
      • Side Menu
      • The Components
    • Chapter 20. Cells and the Bento Interface
      • Tiles
      • Horizontal Lists
      • Back to the Lists
      • Bento
  • Part three. Mixed Reality
    • Chapter 21. Virtual Reality
      • Augmented Reality
      • Mixed Reality
    • Chapter 22. Virtual Interface
      • Space and Environment
      • Virtual Windows
      • Interacting with Reality
    • Chapter 23. Button in Mixed Reality
      • Component Matrix

Get the free sample chapters

Click the buttons to get the free sample in PDF or EPUB, or read the sample online here

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $15 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub