❮ Previous Next ❯

Buttons

  • Build interactive and visually appealing buttons for modern interfaces.

  • Buttons are the action drivers of a form.
    They tell users:

    • What action will happen

    • When an action is possible

    • When an action is blocked or processing

    A poorly styled button:

    • Looks unclickable

    • Feels unreliable

    • Reduces form completion

    A well-styled button:

    • Feels clear

    • Feels responsive

    • Builds confidence

    Why Button Styling is Critical in Forms

    Buttons represent:

    • Commitment (Submit)

    • Decision (Save / Cancel)

    • Progress (Next / Continue)

    In forms, buttons must:

    • Stand out clearly

    • Show state changes

    • Guide user flow

    Buttons are not decoration - they are signals.

    Types of Buttons in Forms

    Common button types:

    • Primary (Submit)

    • Secondary (Cancel / Back)

    • Tertiary (Links / Text buttons)

    Each type must have clear visual hierarchy.

    Primary Button (Submit Button)

    Purpose

    • Main action of the form

    • Should be most visible

Primary Submit Button Styling

This button highlights the main form action with strong colors, hover effects, and focus states using Tailwind. 

<button
  type="submit"
  class="w-full
         bg-blue-500
         text-white
         font-medium
         py-2
         px-4
         rounded-md
         hover:bg-blue-600
         focus:outline-none
         focus:ring-2
         focus:ring-blue-400
         transition"
>
  Submit
</button>

  • Why This Works

    • Strong background color

    • Clear text contrast

    • Visible hover & focus

    • Comfortable click area

    • Smooth transition

    This is industry-standard submit styling.

    Secondary Button

    Used for:

    • Cancel

    • Back

    • Optional actions

    Should be less prominent than primary.

Secondary Button Styling

This button is styled for secondary actions with subtle colors and hover effects using Tailwind. 

<button
  type="button"
  class="border
         border-gray-300
         text-gray-700
         py-2
         px-4
         rounded-md
         hover:bg-gray-100
         transition"
>
  Cancel
</button>

  • Button Size & Spacing

    Buttons should:

    • Be easy to click

    • Have consistent height

    • Match input field height

    Recommended padding:

    py-2 px-4

    Avoid:

    • Tiny buttons

    • Inconsistent spacing

    Hover State 

    Hover tells users:

    “This is clickable”

    hover:bg-blue-600

    Hover should:

    • Be subtle

    • Be quick

    • Never override disabled state

      Focus State 

      Focus is essential for:

      • Keyboard users

      • Accessibility compliance

      focus:ring-2

      focus:ring-blue-400

      Never remove focus styles without replacement.

      Active State 

      Active state gives physical feedback.

      active:scale-95

      This simulates a button press.

      Disabled Button State

      Disabled buttons must:

      • Look inactive

      • Block interaction

      • Communicate “not available”

    Disabled Button State Styling

    This button appears inactive and prevents interaction using opacity and cursor styles in Tailwind. 

    <button
  disabled
  class="bg-blue-500
         opacity-50
         cursor-not-allowed"
>
  Submit
</button>

    • Disabled buttons:

      • Should not hover

      • Should not animate

      • Should not confuse users

        Loading / Processing Button

        During submission:

        • Button may be disabled

        • Label may change

        • Spinner may appear

      Loading / Processing Button State

      This button shows a processing state with disabled interaction and reduced opacity using Tailwind. 

      <button
  disabled
  class="flex items-center justify-center gap-2
         bg-blue-500 opacity-70"
>
  Processing...
</button>

      • Loading buttons communicate:

        “Your action is being processed”

        Button Width Variations

        Full Width (Common in Forms)

        w-full

        Auto Width

        inline-flex

        Choose based on:

        • Form layout

        • Device size

        • Action importance

          Common Beginner Mistakes

          • Too many primary buttons

          • No disabled state

          • Removing focus styles

          • Tiny click areas

          • Over-animated buttons

          If users hesitate → button styling is wrong.

          Accessibility

          Accessible buttons:

          • Use <button> element

          • Have visible focus

          • Have sufficient contrast

          • Work with keyboard

          • Clearly show disabled state

          Accessibility is mandatory, not optional.

        ❮ Previous Next ❯