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
Events Managment App
🔹 Project OverviewEvent Management Tool (iOS) UX/UI concept for business community event managers This project focuses on designing functio
Project
Customer Journey Map — Offsite Co-Working Experience
Structure explanation: The journey map is organized horizontally by seven experience stages, moving left to right from Awareness & Discovery
Project
Mobile Onboarding: Casa di Pasta
🍝 Project Overview: Casa di PastaThis project is a mobile registration and login flow for a pasta workshop app. My goal was to create a fri
Project
Accessible Signup & Login Experience — Brainex
Accessible Signup & Login Experience — Brainex Brainex is a modern and accessible authentication experience designed for a SaaS platform. T
Project
Accessible Signup Form
Accessible Sign-up Form for Mobile Apps ✔️ State-based Form Validation Primary actions remain disabled until all required fields are comple
Project
Accessible Signup Form
This project is an app which helps users to consume content based on their mood and it explores the design of an accessible, inclusive signu
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.