Stop Using Buttons as Links

[@KEVIN-nf9oh]

The wording my professor used while differentiating btwn these 2 stuck with me. To paraphrase, "Usually a button is used to initiate an immediate action (like a form submission) while a link is used to trigger navigation to a different resource".

[@mikebryan3270]

I have used buttons for tabs and call to action. Although I have been tempted to use buttons as links in the past, your reminder has given the why you should not. Thanks

[@mrx-qi8th]

a very useful lesson and basic information that every developer should be aware of, tnx steve. very happy youtube got me into ur channel. have learnt alot from u since

[@TroenderTass]

Thanks, very good point. Im guilty of using buttons and other elements for links as well. Make sure i wont do that any more.

[@techtips4019]

I like your videos and appreciate the effort u do and your persistence, although you're not getting many views. I think your channel is underrated. Thanks

[@SteveGriffith-Prof3ssorSt3v3]

Thanks! As long as people keep sharing the videos the channel will continue to grow and I will keep making new content

[@rafaelfgyn28]

One more great video. Congrats, Steve. Keep it up!

[@starterdev]

Magnificent video, please make more concept video tutorials! I love this video, thanks!

[@victorrono7841]

Really helpful as always Steve. thanks.

[@tunjigeorge5666]

Thanks a lot. You are giving out so much value.

[@drakecoleman9364]

Ope I use the "open in new tab/window " all the time. Worst part is. My first full stack project I've started, I used buttons instead of anchors. You convinced me. Its gonna change

[@tamas-pamas]

Is there a difference in use cases if you use the tag or the ? while we're on the subject...

[@lakshayasood2197]

I think input type button is intended to be used inside a form tag. Clicking on it would submit the form with post http call with content type - form-data. Now I am not saying that you cannot change its behaviour. We can change its behaviour but that was not the intention of input type button

[@tamas-pamas]

@@lakshayasood2197 you can still specify the type as “submit” if you use a button....🤷‍♂️

[@SteveGriffith-Prof3ssorSt3v3]

The input type="submit" or type="button" was intended to be used inside a form. With HTML5 the button tag was designed to replace those. If you put input type="submit" in a form then its purpose was to submit the form. Clicking on input type="button" did not automatically submit it. You were allowed to have multiple type="submit" inputs in any form. Now, with , it doesn't have to be inside a form. However, if you have a button inside a form then it will act exactly like input type="submit". TLDR; Use for all buttons and know that they will act like submit buttons if they are inside a form.

[@tamas-pamas]

@@SteveGriffith-Prof3ssorSt3v3 Thanks :)

[@johnmarkbondad6009]

Thank you very much. I always thought button can also be used as A tag in html. With javascript frameworks and UI/UX design systems they most used button instead of A tag.

[@PhillipParr]

It's incredibly frustrating that so many websites, or dare I say "single page web apps", have decided to use buttons for navigation. It seems to be the "let's do everything with React!" side effect, where actually almost everything that exists should literally just be HTML and CSS. It feels like we've regressed on accessibility and SEO in the past few years.

[@SteveGriffith-Prof3ssorSt3v3]

I feel that it is a product of the rush of people to become developers as quickly as possible. The pressure to learn "how" always wins over learning "why". New developers learn how to replicate a feature without having the experience to ask why it was demonstrated in a specific way. So, an oversight during the learning becomes a repeated pattern in the real world.

[@jorgeantonio4208]

good to know. Thank you!

[@mychroma4912]

Hi ​@Steve Griffith - Prof3ssorSt3v3 , Your content very good and helpful for me. But one question i have , in "Single page Application" frameworks like Angular and react we are not navigate from one page to another page, we only change body part of website, so which one is more suitable anchor tag or button for routing?

[@SteveGriffith-Prof3ssorSt3v3]

If you are going to do something that changes the url in the browser then anchors are the most appropriate

[@mychroma4912]

@@SteveGriffith-Prof3ssorSt3v3 , Thanks

[@joreogan]

Would a Control+Click (or Command+Click) on the anchor element still open the link in a new tab with this approach?

[@SteveGriffith-Prof3ssorSt3v3]

Yes on a link, no on a button.

[@qzbnyv]

So many of the things on Facebook’s desktop site look like they should have those anchor tag features, but don’t. I’m sure it’d bother me more if I spent more than a few minutes there per week. (:

[@scyfox.]

Neil DeGrasse of coding... (just close your eyes and you'll see him)