But even in your example in this post, you're not showing the full picture, despite already using Javascript to modify the CSS of a button. What you're doing by removing the "quirks" is you're removing the very features of a button that people rely on to actually use the button.
You've removed the hover and focus styles, and left in a comment from the original React example that warns about making sure they get set correctly, but you don't do that. Focus styles are absolutely essential for those users who rely on keyboard for navigation. Try it yourself, visit a website and move around without a mouse. Notice how the visual focus indicator moves to each interactive element as you tab to it? Now imagine how difficult that navigation would be if there were no focus rings or borders on elements.
Never remove focus styles. You can change them if you feel you need something more in keeping with your design, but never remove them.
reset built-in styles of a button https://css-tricks.com/overriding-default-button-styles/
Don't forget to provide styles for:
- default state
- `:hover`
- `:active` (See also https://bugzilla.mozilla.org/show_bug.cgi?id=68851)
- `:disabled`
- `:focus-visible`
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
apparently it is not so wide knowledge, if you take a look around, there are plenty webiste using divs instead of button
There are even dedicated articles about it, for example web.dev/use-semantic-html/#use-but...
But even in your example in this post, you're not showing the full picture, despite already using Javascript to modify the CSS of a button. What you're doing by removing the "quirks" is you're removing the very features of a button that people rely on to actually use the button.
Not sure what you're talking about
You've removed the hover and focus styles, and left in a comment from the original React example that warns about making sure they get set correctly, but you don't do that. Focus styles are absolutely essential for those users who rely on keyboard for navigation. Try it yourself, visit a website and move around without a mouse. Notice how the visual focus indicator moves to each interactive element as you tab to it? Now imagine how difficult that navigation would be if there were no focus rings or borders on elements.
Never remove focus styles. You can change them if you feel you need something more in keeping with your design, but never remove them.
(Safari and IE require polyfill)
That is how CSS reset works - everything is removed, developer suppose to provide their own style
There is even a comment