Contents
The element is used to create an HTML button. Any text appearing between the opening and closing tags will appear as text on the button.
While you are correct in asserting that span s (and div s, etc) are legal contents of a button element, the illegal elements are all to do with having button content that does anything other than layout / styling.
Is link a button?
A link will redirect you to a new page or a section within the same page. In VoiceOver’s rotator, it will also be collected within the “Links” window. A button is focusable, too, and can be triggered by the space key. A button will trigger an action like opening or closing something.
What’s the evolution of buttons in web design?
As web design has changed over time and new trends appeared every now and then, the design of buttons evolved too. The challenge of button design is quite simple: Buttons must be designed in a way that they are recognized as buttons and users can expect the action which is followed by the button.
Tabindex and click events tacked onto an anchor tag are a markup anti-pattern that will trip up future developers and code reviewers. Making routing a core part of a web application makes it easier for developers to use links where appropriate and helps to clarify the purpose of buttons.
When designing buttons, there are a couple of different elements to take into consideration. When designing for a product, you should always be thinking of people with impairments. To ensure that your colours are accessible by everyone, you can use an online contrast checker. This is the one I use.
What does a button do in a website?
A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup. What is navigation?