Comments on: A Complete Guide to Links and Buttons https://css-tricks.com/a-complete-guide-to-links-and-buttons/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 20 May 2022 14:19:53 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Geoff Graham https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1795809 Fri, 20 May 2022 14:19:53 +0000 https://css-tricks.com/?p=297030#comment-1795809 In reply to Lili.

I think you said the answer right there: a link to another page of a form is still a link if it’s going to another URL. And is that modal button triggered with JS? If so, <button> it up. The general guidelines at the top of the guide are a good litmus test between links, buttons, and form submissions.

]]>
By: Lili https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1795807 Fri, 20 May 2022 10:25:42 +0000 https://css-tricks.com/?p=297030#comment-1795807 What should it be when we have sometimes button, sometimes link…? I have a form and back button – when the form is not filled out this is a link to previous page. When it is filled out it is a button to open a modal with question ‘Are you sure?’ hmmm

]]>
By: Michael https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1757408 Tue, 02 Jun 2020 14:21:45 +0000 https://css-tricks.com/?p=297030#comment-1757408 In reply to Justin Conway.

Wow, thanks for sharing!

]]>
By: Dario https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754870 Thu, 05 Mar 2020 12:00:27 +0000 https://css-tricks.com/?p=297030#comment-1754870 Heihei
I have a one page but with three href=”test.html”
Whem I am on test.html is it possible to return on index.php#about or index.php#contact which are some parts of the main page.
The question is about the # that when the user clicks on contact, that it jumps back to the main page and there directly to #contact.

]]>
By: Justin Conway https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754567 Thu, 20 Feb 2020 16:44:12 +0000 https://css-tricks.com/?p=297030#comment-1754567 According to the spec (https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer) you shouldn’t have to put noopener and noreferrer together:

<a href="..." rel="noreferrer" target="_blank"> has the same behavior as <a href="..." rel="noreferrer noopener" target="_blank">.

]]>
By: Christian https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754502 Tue, 18 Feb 2020 18:46:54 +0000 https://css-tricks.com/?p=297030#comment-1754502 Thank you for the article. I’ve done my share of research on links/buttons, navigation/commands, but it looks like I’ve missed a few things. This will help fuel our discussions as we create our web development standards and try to get consistency across all of our products.

]]>
By: Evan https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754470 Mon, 17 Feb 2020 15:26:24 +0000 https://css-tricks.com/?p=297030#comment-1754470 Is there a reason the quick guidelines only recommend <input type="submit" /> for forms? I thought <button type="submit" /> and <input type="submit" /> were interchangeable. The only difference the article mentions between the two that I found is that <button> can have child content, so it’s not obvious to me why you couldn’t use either an <input> or a <button> for form submissions.

]]>
By: Jason https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754468 Mon, 17 Feb 2020 14:37:23 +0000 https://css-tricks.com/?p=297030#comment-1754468 Thanks for this fantastic article!

Just looking above you can see how much extra work faking a link is, and that is before you consider that is breaks right-clicking, doesn’t allow opening in a new tab, doesn’t work with Windows High Contrast Mode and other reader modes and assistive technology. Pretty bad!

It is absolutely astounding how many times I run into fake links. It seems every codebase I inherit is full of them. Not only that, but Google does it all the time on their nifty little applications baked into search results. It really drives me crazy.

]]>
By: Adrian Roselli https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754410 Fri, 14 Feb 2020 23:18:53 +0000 https://css-tricks.com/?p=297030#comment-1754410 Key handling note on native controls:

events triggered by the space bar fire when the key is released (or onkeyup);
events triggered by the Enter key will fire the event as soon as you press the key down (or onkeydown).

I have done testing with keyboard-only and screen reader users and while they may not know this behavior, they generally react with a bit of surprise when it is not followed. If you are trying to re-create a native control, make sure the keyboard handlers correspond. A pen where you can try it yourself.

]]>
By: Vadim Makeev https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754403 Fri, 14 Feb 2020 19:44:42 +0000 https://css-tricks.com/?p=297030#comment-1754403 I think you mixing up something here:

<a id=section-2></a>
<h3>Section 2</h3>

It doesn’t make sense because you can use id attribute on <h3> to achieve the same result. But there used to be name attribute and the following pattern:

<a name=section-2></a>
<h3>Section 2</h3>

But name is deprecated in favor to id now. I’d suggest expanding logical links section with a different example featuring current links in menu or paging. This is where they’re are super convenient.

]]>
By: Adam https://css-tricks.com/a-complete-guide-to-links-and-buttons/#comment-1754402 Fri, 14 Feb 2020 19:23:35 +0000 https://css-tricks.com/?p=297030#comment-1754402 This is a slam dunk of an article! A ton of information presented in an easy to read way and backed-up by other people’s work. Thanks for writing it!

]]>