level 2SupremoZanneOp · 3 yr. agowell, there's always an opportunity to make new 88x31 buttons. Now since modern systems are approaching the 8K resolution, we should start making 264x93 buttons, so it's time to scale up the dimensions for modern resolutions.

Rawson Mausoleum

50

Indoor

Oakland Bell Tower

Oakland Bell Tower

Gemini pages are fast to load, because they cannot include scripts, stylesheets or even images (just links to images, although some clients have options to load these in-line if you want).

This is probably rare enough that you would probably make a class (e.g. .link-looking-button) that incorporates the reset styles from above and otherwise matches what you do for anchor links.

You can style a link to look button-like Perhaps some of the confusion between links and buttons is stuff like this: <img loading="lazy" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-08-at-8.55.49-PM.png?resize=264%2C142&#038;ssl=1" alt="" class="wp-image-301534" width="264" height="142" data-recalc-dims="1" />Very cool “button” style from Katherine Kato. That certainly looks like a button! Everyone would call that a button. Even a design system would likely call that a button and perhaps have a class like .button { }. But! A thing you can click that says “Learn More” is very much a link, not a button. That’s completely fine, it’s just yet another reminder to use the semantically and functionally correct element.

Don'tAvoid using two contained buttons next to one another if they don’t have the same fill color.

If a link doesn't have a meaningful href, it should be rendered using a <button> element.

I think “buttons do things (configure the download), links go places (request the download)” still holds.

Buttons Do Things, Links Go Places

However, the W3C provides us with an important clue as to who is right: the download attribute.

There seems to be a lot of confusion over when to use buttons and when to use links. Much like tabs versus spaces or pullover hoodies versus zip-ups, this debate might rage without end.

The debate about whether a button or link should be used to download a file is a bit silly, as the whole purpose of a link has always been to download content. HTML is a file, and like all other files, it needs to be retrieved from a server and downloaded before it can be presented to a user. The difference between a Photoshop file, HTML, and other understood media files, is that a browser automatically displays the latter two. If one were to link to a Photoshop .psd file, the browser would initiate a document change to render the file, likely be all like, “lol wut?” and then just initiate the OS download prompt. The confusion seems to come from developers getting super literal with the “links go places, buttons perform actions.” Yes, that is true, but links don’t actually go anywhere. They retrieve information and download it. Buttons perform actions, but they don’t inherently “get” documents. While they can be used to get data, it’s often to change state of a current document, not to retrieve and render a new one. They can get data, in regards to the functionality of forms, but it continues to be within the context of updating a web document, not downloading an individual file. Long story short, the download attribute is unique to anchor links for a reason. download augments the inherent functionality of the link retrieving data. It side steps the attempt to render the file in the browser and instead says, “You know what? I’m just going to save this for later…”

No, this is not specified. The spec even says that contained buttons can be in sentence case

If you were to have 2 buttons placed side by side, on which side should the primary button sit?

Option A shows the primary button on the left. The argument here is that it is probably what the user wants to see first, so show it first.

Text links are a very simple button type.

Some text links may have an icon with them.

Icon buttons have no label and are only an icon. Because they don’t have a label, they save a lot of space in an interface. Icon buttons also allow you to stack other icon buttons next to them in a small space.

Primary buttons should be used in situations where the user may want to go ‘next’, ‘complete’, ‘start’, etc.