Button Design Challenge
Buttons are one of the founding elements of UI.
A few buttons as my first attempt in developing something. Feel free to provide feedback.
First, we study the anatomy of a button, and its possible variants, including text only, icon only, or a combination of the two.
Basic example of the Hierarchy
How the Destructive actions could look like.
Verifying its contrast using the WCAG Ratio.
Different variants, like Hovered, Clicked, Disabled.
Thank you for checking it out, I am at the early stages of my design, so all advice is welcome.
Reviews
0 reviews
This project hasn’t been reviewed yet
Share your expertise with the Uxcel community by providing a review of this project. Not only will you help others, but you will also enhance your leadership skills.
3 Claps
Average 3.0 by 1 person
You might also like
Project
GoDaddy Sign-in Page Accessibility Optimization
Highlights: ✔️ Reduced Brand Name Repetition for Cleaner UI ✔️ Proper Text Alignment for Better Readability ✔️ Clear & Accessible Error Mess
Project
My Bestie Nessie - Making a game in one day at the Oakland Museum of Art & Digital Entertainment
A game jam submission for MADE @The MADE Game jam 2025. The goal for this project was to create a game with the theme of "the last one" with
Project
Web SaaS Sign-Up Flow
✅ Progressive field validation: real-time email and password checks with clear error and success states. ✅ Password strength indicator: dyn
Project
Push notifications
5 different push notifications
Project
Samyoung Chemical
Samyoung Chemical will strongly develop to become a leading company in the film production market with advanced technology and leading quali
Project
Roof Recovery – Local Roofing Contractor
Variation 1: White Home PageThis variation focuses on a clean and minimal landing page to ensure clarity and trust for potential customers.
Visual Design Courses
Course
UX Design Foundations
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.