DEV Community

Cover image for CSS can help improve your HTML⁉ - Ep 2: buttons and links.

CSS can help improve your HTML⁉ - Ep 2: buttons and links.

GrahamTheDev on December 15, 2021

Part 2 of using CSS to make our HTML better! In this second part of this series we will be exploring how we can use CSS to ensure (and enforce) th...
Collapse
 
sfiquet profile image
Sylvie Fiquet

I have a question as I'm still learning this stuff and my design skills are limited.

I agree that putting role=button on a link is just bad practice. If it's a link, it's a link.

My question concerns this bit:

If the reason is: "I want it to look like a button, but I want it to redirect me to a new place" I have two possible answers:

  • Drop the "I want it to look like a button" and think better your design.
  • Use a button and the "click" event.

I have an app where I did something like this on the homepage. Basically there's a link styled like a button to make it stand out more, with the idea of adding more as new functionalities are added.

It's definitely a link, screen-readers will treat it accordingly, and desktop users can see the url on hover.

Using a button would be bad for progressive enhancement, as it wouldn't work without JavaScript. And honestly it should be a link, I see no reason to use something else in this particular case.

Are you saying I should just choose a different styling to make my link stand out without looking like a button? My first question is why? Does it hurt users if a link is styled like a button? And assuming you're right, what would you suggest would be a better alternative?

Collapse
 
grahamthedev profile image
GrahamTheDev

You have almost certainly used the correct element so don't worry there.

The point they were trying to make is that it can be confusing for keyboard users when they encounter a link that looks like a button as they may press Space to try and activate it thinking it is a button (and that would just result in a page scroll normally!).

However it has become accepted practice to style "call to actions" etc. like buttons.

It will be fine as it is do not worry!

One suggestion would be to style your "links styled like buttons" slightly differently to "actual buttons" just so there is a visual difference / consistency across the site, but it is just a suggestion and certainly not something to worry about.

Thread Thread
 
sfiquet profile image
Sylvie Fiquet

This is exactly what I wanted to know. I had no idea about Space, I always use Enter on both links and buttons when testing on keyboard. I can see how that would be annoying.

Now I'm thinking about which styling would make it more obvious that it's a link. A different shape, colour or font wouldn't help, it would still suggest that it's functionally a button. My guess is that underlining on focus (like I already do on hover) would be the most obvious. Are there other widely used signals I should know about?

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Underline on focus vs no underline on focus is one way. 👍

Iconography in conjunction with text is a great way to differentiate, an arrow pointing to the right for example would work for links to differentiate them from buttons.

The key here is something that is unique to buttons vs something that is unique to links styled like buttons just so a user can learn "square looking buttons are links, rounded looking buttons are actually buttons" for example.

Thread Thread
 
sfiquet profile image
Sylvie Fiquet

I like the arrow idea, it's a good hint.

The problem I have with two styles that users learn to recognise is that it might not work so great on a landing page, which would mainly be visited by new users rather than returning ones. But it's still good to know it's an option for a different use case.

Thanks for the tips!

Collapse
 
code_rabbi profile image
Emeka Orji

I believe website structure and layout design is improving by the year and we should not be so rigid as to follow a particular convention in a bid to honor some laid down rules that were given years ago.

Dev.to has always been known to be a tech writing/blogging platform until one day I saw a post by a regular writer raising money to buy a new laptop because his former laptop got broken.

I agree a "button is a button", I also rant about it in my head while building ever since I saw your post on it, but if we wrap ourselves, our team, our projects, start-ups or organization around that and not allow for flexibility, we wouldn't know what newer things we could create.

The designer who began the trend of making links look like buttons must have sat to think "who said only buttons could look this way". The look of buttons were also created by a person 😒.

In most documentation today, the href='#SectionOfPage' used on an anchor tag (while passing the id='SectionOfPage' into the section tag), is used to navigate between sections of pages. That is a button-like functionality there, but still we use it to navigate faster, plus in few cases where JavaScript doesn't load, navigation still works.

The web as we know it would have changed a lot in less than 50yrs from now all because we explored possibilities.

Yes @inhuofficial I learnt a bunch from your post! This is so useful in a team/organization context. Where everyone has to write in a conventional pattern that the whole team understands.
🚀

Collapse
 
grahamthedev profile image
GrahamTheDev

Layouts I totally agree on! Semantics should be followed as there is very very little that you cannot do while following best practices! ❤️

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Link tags are allowed to have missing or empty href attributes in the case that their resulting action would be not allowed. The idea is that the page would consist of dynamic content, but the link is left in as an effective placeholder. Assistive tech following the spec will ignore these links, but they're still perfectly valid. The links are, effectively, in a disabled state.

Might also be worth considering the 3 <input> button types: button, submit, and reset.

Also, while lesser used, there are other patterns that apply button styles to elements, such as <label>s attached to radio buttons and checkboxes, with the corresponding role and aria- attributes added for better accessibility. These sorts of markups are infrequently used, but they're still valid.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Some great points here, I will see about adjusting the article and examples to account for these and downgrade them to warnings rather than errors.

I can’t see a valid use case for applying button styles to labels though as those would effectively be custom controls at that stage (so I would argue a separate class for clarity - even if it does go against DRY principles?) what do you think?

Update

I added a new section to account for the items mentioned here.

See if you think that covers it well enough or if there is anything else to add, I will work on updating the fiddles to incorporate that.

Thanks for the suggestions! ❤

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

My point about the <a> without an href attribute wasn't about anchors, but still links. Imagine something like this:

<a>You can find your purchased download here.</a>
Enter fullscreen mode Exit fullscreen mode

This would create the link as a placeholder, which might be useful for visual reasons, but it wouldn't yet be an active control. Then, based on some sort of event, you could make it active by giving it a valid href value using Javascript.

It's not a common pattern, but it's a completely one.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

I used "anchors" for all <a> elements, perhaps the wording wasn't clear but I was talking about <a name="" would then be a warning in addition to allowing for <a>some text</a> to be a warning rather than an error (just in case you did want to do something like you suggest).

I think we are in agreement! lol!

Collapse
 
oskargrosser profile image
Oskar Grosser • Edited

I did not know that href may be left out to let anchor elements behave as placeholders, thank you! I should definitely read the specs more instead of relying on tools' complaints (i.e. Lighthouse lead me to believe that missing the href attribute is invalid or inaccessible HTML).

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Lighthouse is not really that good for accessibility testing, it misses a lot and throws up a fair few false positives. The a11y tool in Firefox is better, but better than both of those is the aXe tool, which is available as a plugin for all the major browsers.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I'm going to play devil's advocate here... how about a link to an external login site? A redirection to another site with a token and information, that will go back to our site eventually once it is validated. Should it be an <a> or a <button>? It is a redirection, so it seems like <a> would be a better option, but should it look like a button or like a link? After all, if it was an actual login form, it would be a <button>, no?

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

That's it, sorry for "ranting" about this stuff, great post as always 💖

I am the angry rants person, you are always welcome to rant on my posts, I enjoy it and it is useful! 😁

I agree with what you are saying here and in my own personal style sheet I would not include as much flexibility or use old stuff like <a name> or <input type="button" (although <input type="reset" I may occasionally reach for if I need a no JS form backup...can't remember the last time I did use it though 🤣).

But I want to show people options as the post is more about concepts and showing people how to "roll their own" solution, rather than a copy paste solution for everyone.

It is not my place (even if I like to pretend it is sometimes 😉) to tell people not to do something which is valid HTML even if I think it is outdated unless I am the one writing the cheques for the code!

As always we are pretty much on the same page about these things and perhaps my article was a little too "soft" this time! 😁❤

Collapse
 
cubiclesocial profile image
cubiclesocial

The problem with using <button>, especially the <input> button types, is that it comes with a LOT of baggage. Safari on iOS, for example, will override styles regardless of what they are with iOS button styles resulting in a less than attractive UI/UX. One could even argue that iOS buttons are downright ugly. a tags, on the other hand, can be styled however the designer wants. But even a tags also have baggage in that preventDefault() has to be called in Javascript (or return false; for the lazy) when handling the click action directly. Failing to do so causes the browser to add # to the URL and push the current page to the browser history back stack.

Collapse
 
grahamthedev profile image
GrahamTheDev

Safari on iOS, for example, will override styles regardless of what they are with iOS button styles resulting in a less than attractive UI/UX

button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
Enter fullscreen mode Exit fullscreen mode

And problem solved there and it has good support.

If this has been stopping you from using a <button> when you should then please start using them now.

Please read this article on why you must use a button as I would hope it will stop you using a pattern we haven't needed for a long time!

Thread Thread
 
code_rabbi profile image
Emeka Orji

😂 I like this guy!

You solved it like "There's your answer, no more excuses"

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Take no prisoners! 🤣

Collapse
 
posandu profile image
Posandu

Great Article!
PS: I Codepen down? I can't see the embed

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Looks that way! Never seen CodePen go down before 😱

Edit: looks like AWS has gone belly up...AGAIN...so much for their reliability as that is twice in a month!

Collapse
 
posandu profile image
Posandu

Okay. thanks for the reply :)

Collapse
 
charliejoel profile image
Charlie Joel

This is actually a pretty good idea! It could finally stop junior devs from using divs as buttons all the time. Might add this into the SCSS boilerplate at work...

Collapse
 
grahamthedev profile image
GrahamTheDev

Steal it, use it, save developers from themselves! 🤣

Glad you found it useful! ❤

Collapse
 
natalia_asteria profile image
Natalia Asteria • Edited

This is very cool! Though it's more practical to enforce it trough code style enforcement tools like ESLint or other similar lint tools since you can integrate it with CI.

Collapse
 
grahamthedev profile image
GrahamTheDev

Part 3 is where this starts to get really interesting, so make sure to follow me for that!

If I missed anything that we could check for then let me know once again!