88x31 button tips

A series of tips of how I handle my 88x31 (other sizes are available)

set width=88 height=31

This tells the browser how big the button will be once it’s loaded, as opposed to needing to load it and then know the size from the image. This goes for all images, but is especially useful for buttons to avoid the page jumping around as they’re loaded.

Note that the size here is not the same as the size the button will be rendered. The size here is always the image’s intrinsic size, or how many pixels wide and tall the image is when viewed in an image editor. Larger buttons (using .button-large mentioned below) still get width=88 height=31.

use alt text

Both for screen reader users and just users who have images disabled. I tend to just literally type out what’s in the image, if the button has text.

respect prefers-reduced-motion

If the button isn’t animated then you don’t need to do anything here.

If the button is animated, then get both an animated and a static version. (If the site doesn’t provide an animated version, ask permission to make one from some given frame. This is what I did for https://nia.dog/home’s button and a few others.

Here’s an example (with alt text and width trimmed out for brevity)

<div class=buttons>
    <a href="https://nia.dog/home">
        <img loading="lazy" class="button-large animated-variant"
            src="/img/buttons/nia88x31.gif">

        <img loading="lazy" class="button-large static-variant"
            src="/img/buttons/nia88x31.png">
    </a>
</div>

The relevant CSS for animations is:

.static-variant {
    display: none;
}

@media (prefers-reduced-motion) {
    .animated-variant {
        display: none;
    }

    div.buttons:hover .animated-variant {
        display: initial;
    }
    div.buttons:hover .static-variant {
        display: none;
    }

    .static-variant {
        display: initial;
    }
}

By default (if prefers-reduced-motion is not set), the only thing that applies is the display: none on .static-variant in order to hide that, so just the animated button shows up.

Otherwise, we hide the animated variant, and display the static variant.

Unless .buttons is being hovered, in which case we go back to displaying .animated-variant and hiding .static-variant. This is to allow users who have reduced motion enabled to still see the animations if they hover over the buttons (or tap on the button area, if on mobile).

This combined with lazy loading does mean the animated buttons aren’t even downloaded until they’re tapped on, which might be unwanted. Feel free to disable lazy loading if you want them to preload.

Notably, the .buttons div should cover all your buttons, to give the user a wide area to mouse over. Don’t put a div per button, since then the mouse would cover the button the user wants to see the animation of.

(optional) don’t hotlink

I keep my site free of third party resources, which includes buttons. If it’s not mentioned by a site, I’ll always ask permission to rehost their button on my site (and have never been told no yet).

Reasons to rehost are

• speed (you already have an open TLS connection to my site)
• reliability (if someone’s site goes down, their button is now blank, which doesn’t look great)
• privacy (sites i link to don’t need to know about every viewer of my homepage)

Note that rehosting does mean if they change their button, you don’t get notified. Some tool using .well-known/button.json might be useful here, as a static site build step to automatically fetch buttons and notify on changes. Future project? (That, or just feeding it a URL list of buttons.)

(optional) increase size of buttons

.button-large {
    image-rendering: pixelated;
    width: calc(88px * 2);
    height: calc(31px * 2);
}

For buttons to friend websites (as opposed to general buttons), I use .button-large to make them larger. 88x31 is a bit small (Also see: Why we are still using 88x31 buttons which is worth reading, everything said here applies to any size of button really).