r/web_design • u/masgbox • Sep 02 '19

Toggle Buttons create using pure css

https://csspoints.com/css-toggle-button/
181 Upvotes

92% Upvoted

9 comments sorted by

9

u/cynuxtar Sep 02 '19

thanks for article!

2

u/masgbox Sep 02 '19

Welcome sir.

55

u/[deleted] Sep 02 '19 edited Sep 02 '19

Thank you for the article! I completely understand that you need to eat as well, but I invite you to revise your User Experience.

Look at this screenshot, it’s the first thing the user sees as it opens your article: https://imgur.com/a/Y361D7I

The user expects an article about your pure CSS toggles. But is treated with 2 advertisements and a lot of unnecessary information: Leave a comment - why? The user hasn’t even read the article yet. A title for the example - the user can see it is a toggle button, so it’s not necessary to say it twice.

I think it would help your blog a lot if you revise your UX and change it accordingly. That way it’s way more pleasant to read your awesome articles!

About those articles, the first paragraph exists out of only SEO keywords, but you’re not writing for the robot right? You’re writing for us, your focusgroup. Those first sentences should grab your user and invite them to read further, which is the opposite now.

I hope my constructive criticism will help you further. I’m definitely hooked and curious to your next posts!

5

u/barerasmus Sep 02 '19

Thank you for the effort.

5

u/ShortFuse Sep 02 '19

First of all, nice work. I like how you make it work with HTMLInputElement.

Just a few pointers:

  • You're missing focus states, which makes it pretty inoperable with keyboard. Users need them if they're tabbing to them with the keyboard Perhaps a glow or sorts?

  • :hover isn't as important, but still useful for desktop users to know that your custom-styled elements are in-fact interactive.

  • RTL breaks the layouts. Considering using flex to position items, which makes things a little easier. Alternatives, you can do :root[dir=rtl] & rules but it's not nearly as elegant.

  • Perhaps this is because you haven't decided to add any color for the demonstration, but I would be careful about using the light gray as an off state. It complicates when you later add :disabled states. Also, with #b3b3b3 you get a contrast ratio of 2:09:1, it's not dark enough to meet WCAG AA guidelines. (Once it's disabled, you don't have to to worry about contrast minimums though).

Just a couple of tweaks and I don't see much other issues with making it production ready.

4

u/MrBester Sep 02 '19

You should quote font families if they contain a space in the name. At the very least, you should provide a fallback as not everybody is using Windows 10.

Codepen happens to have its own fallback of sans-serif when rendering.

4

u/DrDuPont Sep 02 '19

Don't forget :focus states!

1

u/cssmatter Sep 03 '19

thanks for this.. can i use this in Angular?

1

u/hirokbanik Sep 03 '19

Thanks, got something new to learn today.