DesignCools

Button Design | Button Components Design

Button Design are a fundamental component of user interface (UI) design. They serve as interactive elements, guiding users to take specific actions and navigate through digital platforms seamlessly.

Preview

Show Code

<div class="grid grid-cols-4 m-4">
    <div>
        <button class="relative inline-flex cursor-pointer items-center rounded-lg bg-[#525B44] px-4 py-2.5 text-center text-sm font-medium text-white focus:outline-none focus:ring-4 focus:ring-[#E5E3D4] hover:bg-[#525B44]">
            <label for="open" class="absolute left-0 block h-full w-full cursor-pointer"> </label>
            Dropdown
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" class="ml-2" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
        </button>
        <input type="checkbox" class="peer hidden" id="open" checked />
        <div class="peer-checked:block mt-1 hidden w-44 rounded border bg-white shadow-md">
            <ul class="py-1 text-sm text-gray-700" aria-labelledby="dropdown">
                <li>
                    <a href="/" class="block px-4 py-2 hover:bg-gray-100">Home</a>
                </li>
                <li>
                    <a href="/" class="block px-4 py-2 hover:bg-gray-100">About Us</a>
                </li>
                <li>
                    <a href="/" class="block px-4 py-2 hover:bg-gray-100">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>

    <div>
        <button class="relative inline-flex cursor-pointer items-center rounded-lg border border-[#525B44] px-4 py-2.5 text-center text-sm font-medium text-[#525B44] hover:shadow-lg focus:ring-[#E5E3D4] focus:outline-none focus:ring-4">
            Outline
        </button>
    </div>
</div>

Core Components of a Button Design

  1. Label (Text)
    • Clarity: The text should clearly indicate the action. For example, use “Submit” instead of vague labels like “Click Here.”
    • Brevity: Keep the label concise and action-oriented.
  2. Shape and Size
    • Rounded corners offer a modern and approachable look, while sharp edges convey formality and precision.
    • Buttons should be large enough for easy interaction, especially on mobile devices.
  3. Color
    • Use colors that contrast with the background to make the button stand out.
    • Align colors with the action’s intent (e.g., green for “proceed,” red for “cancel”).
  4. Iconography
    • Icons can complement text labels, adding clarity and visual appeal. For instance, a trash icon next to “Delete” reinforces the action.
  5. States
    • Buttons should have distinct states: default, hover, active, disabled, and focus. Each state provides feedback and enhances usability

900+ Modern Tailwind Components

Stay in the loop with everything you need to know.

Check Now