24 Matching Annotations
  1. May 2021
  2. Jan 2021
    1. 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.
    2. 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.
    1. Don'tAvoid using two contained buttons next to one another if they don’t have the same fill color.

      Interesting. Do I agree with this?

      What is the reason they recommend this? It looks fine to me...

      At least they give alternatives that they recommend...

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

      Hmm. Do I agree with this?

    1. I think “buttons do things (configure the download), links go places (request the download)” still holds.
    2. Buttons Do Things, Links Go Places
    3. However, the W3C provides us with an important clue as to who is right: the download attribute.
    4. 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.
    5. 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…”
  3. Nov 2020
    1. If you were to have 2 buttons placed side by side, on which side should the primary button sit?
    2. 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.
    3. Text links are a very simple button type.

      Eh? I didn't know links were considered buttons. I'm not sure I totally agree understand, but it's not outrageous either...

      Update: Okay, I guess when you put an outline around it (like they directly below this paragraph), and even more if you put an icon with it (like they did further down; https://hyp.is/DZTZzi6fEeuu65uvQJ9W1Q/uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112), the link looks like more like a button.

      But (and I think this is their point) it is what it is because of how it's used and not how it's styled: it should be the same thing (a button) whether or not it has an outline.

    4. Some text links may have an icon with them.
    5. 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.
    6. Primary buttons should be used in situations where the user may want to go ‘next’, ‘complete’, ‘start’, etc.