The Button Cheat Sheet

The Button Cheat Sheet

www.buttoncheatsheet.com buttoncheatsheet.com1 month ago in#UX Love49

The HTML5 Rating: Good, use it! 🥳 Yea or nay? Details That’s a correct button! It’s focusable It has right kind key occasions through default Correct button position Supports HTML content material All in all gorgeous! ❤️ The button Rating: Okay, however gives extra flexibility! 🙂 Details That’s a correct button! It’s focusable It has right kind key occasions through default Correct button position Supports most effective textual content content material The symbol button Rating: Okay, however now not beneficial. gives extra flexibility! 😕 Details That’s a correct button! It’s focusable It has right kind key occasions through default Correct button position Supports most effective textual content content material Styling restricted A div * Rating: The worst, don’t use it! 🤮 Yea or nay? Yea or nay? Details That’s now not a button! Not keyboard focusable No key occasions through default No semantic button position Shows incorrect cursor on hover A focusable div Rating: Really unhealthy, don’t use it! Yea or nay? Yea or nay? Details That’s now not a button No key occasions through default No semantic button position Shows incorrect cursor on hover A focusable div with a button position Rating: Bad, don’t use it! Yea or nay? Yea or nay? Details It looks like a button, but it surely’s nonetheless now not a correct button No key occasions through default Shows incorrect cursor on hover An symbol Rating: Hell no, don’t use it! Details That’s a picture, now not a button Not keyboard focusable No key occasions through default symbol as a substitute of button position No out there identify A placeholder hyperlink Rating: Hmm…no, don’t use it! Yea or nay? Yea or nay? Details That’s a placeholder hyperlink, now not a button Not keyboard focusable No key occasions through default hyperlink as a substitute of button position Shows incorrect cursor on hover Ned Fisch, ned Fleisch** Rating: Nope, don’t use it! Yea or nay? Yea or nay? Details That’s a placeholder hyperlink, now not a button No key occasions through default Shows incorrect cursor on hover The worst of 2 worlds Rating: Please, simply don’t do this! Yea or Nay? Details Don’t nest interactive components If you want a hyperlink that appears like a button, taste the hyperlink accordingly  » Read More

Like to keep reading?

This article first appeared on buttoncheatsheet.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply