Skip the navigation

88x31 buttons I've made

Published on

As I found out a while ago, some of the 88x31 buttons I've created have made their way into online button collections, ending up on a surprising number of indie websites. For future reference, here's a complete list of them, detailing how I created them and how they evolved over time:

(Okay, technically, this isn't a complete list because there's a bunch of iterations where I didn't do anything except recompressing the images or renaming them, but why would want to know about those?)

Initial design

Date: 2020-02-29

Solid pink rectangle
fbaac0.png

My social media profile picture at that moment was a solid square of Slapper Pink, my favorite color. Since I'm a very original person, I did the same to the button for my website.

Fake 'NeoCities' logo in front of a dim planet with rings
neocities.png

This was my attempt at ripping off the Neocities.org, the web is yours button. I think I did a decent enough job because no one noticed.

The font is Liberation Serif Bold Italic. The planet in the background was taken from Public Domain Vectors. If I remember correctly, the space behind the planet is a heavily downscaled version of that picture from NASA I used in my dream journal.

Shiny drawing of the Earth, captioned 'World Wide Web'
www.png

This was an attempt at ripping off another button, coincidentally also made by A.N. Lucas. In retrospect, I did a shitty job. This looks nothing but cheesy.

The picture of the planet was, once again, taken from Public Domain Vectors. The font is GNU Unifont.

Fat penguin Tux, captioned 'Made on GNU/Linux'
gnu-linux.png

In the '90s, there were many buttons like "Made with Notepad", so I decided to make a parody of that with the software I used. I think I got the motivation to do that from a button that said something like "Best viewed in Firefox".

The Tux was, of course, taken directly from Larry Ewing. The font on the top is GNU Unifont, and the one on the bottom is Liberation Serif Bold Italic.

Sharp green letter N, captioned 'Made with neovim'
neovim.png

Same thing as with the GNU/Linux one.

The logo was taken directly off the website of Neovim. The font on the top is, once again, GNU Unifont, and the one on the bottom is Nimbus Roman Italic, half of which is bold. I used the same colors for it as they did on the website.


Without going too deep into the history of my website: on this date, I decided to make an alternative retro-looking version on my website and upload it to Neocities. As part of that effort, I decided to add some buttons for extra points. A lot has changed since then, and now the "retro version" is the only version of my website, and the Neocities version is simply a mirror.

Like with every other artwork on this website, I used GIMP as my image editing software and made heavy use of the nearest-neighbor downscaling because that's what they did in the '90s too. Additionally, I used no font antialising because that was completely unheard of back then.

Since I'm a fancy fellow, I drew the borders with the NeXTSTEP/Windows 98 palette with 2 colors on each side instead of the one with 1 color on each side, which almost every genuine '90s button used. Unfortunately, this ended up biting me in the ass later because, guess what, they did it for a reason - these colors are not Web-safe.

"Make it look more genuine"

Date: 2020-03-01

Oh boy, that's a weird one. So first of all, your eyes aren't deceiving you - there were no visual changes in this iteration. Or well, I guess your ears if you're using a screen reader. Either way, the only change was that I converted everything to GIF (pronounced "GIF") so when people download them, they see the .gif extension and think "ah yes, a genuine '90s website". I abandoned this idea 6 days later because, you know, fuck it, PNG is fine.

Initially, I was going to write that this was, perplexingly, the iteration that spread, despite being the shortest living one, but it seems actually not to be the case. The only clue I have as to why any of them spread at all is this button wall which picked up the GNU/Linux button sometime between 2020 and 2021. My theory before was that since it has a .gif extension on that wall, its author/their scanner must've picked the button from my website when it was still in GIF. But now that I look at it, the button on that wall ain't the 2020-03-01 iteration, it's the 2020-03-07 iteration. Did it end up there for some other reason, and the .gif extension is just a byproduct of a conversion the author of the wall did? I'm even more clueless now than before.

But regardless, by sheer luck, the GNU/Linux button, presumably downloaded from that wall, ended up in a video by Michael MJD. Truly a surreal experience.

And now it's Web-safe™

Date: 2020-03-07

The main difference in this iteration is, as you've probably guessed already, the fact that I switched from using an automatically generated, for each button, palette to a 216 color Web-safe palette because that's more authentic. The fancy borders had to be sacrificed in the process. I used Floyd-Steinberg dithering because, while I was experimenting with background images, it turned out ordered dithering sucks really bad. Since the planet on World Wide Web button was already dithered, I remastered it to use Floyd-Steinberg too so it doesn't look out of place.

Slap like NOW!

Date: 2020-03-13

Thumbs up emoji, captioned 'Slap like NOW!'
slap-like-now.png

I think I added this one so there are 6 of them total and they all align into one nice 2 row rectangle. In case you're wondering, it linked to my Neocities profile page, and the phrase itself was stolen from Davie504. Also it's sort of a parody of the famous "Netscape Now!" button.

The thumbs up emoji was stolen from Twemoji. Unfortunately, by "stolen" I actually mean stolen because I don't think I've ever credited them for that on the licensing information page. Oh well, I guess better late than never:

Copyright 2019 Twitter, Inc and other contributors. Graphics licensed under CC-BY 4.0

The fonts are the same as in the GNU/Linux and the Neovim buttons - GNU Unifont on the top and Liberation Serif Bold Italic on the bottom.

A wild folder appears

Date: 2020-12-27

Michaelsoft Bindows 1997 folder, captioned 'K.K.'
kirby.png

I got bored of using a solid color to represent myself, so I put the initials I used back then near a folder icon and called it a day. The folder, if that even requires an explanation, was inspired by Windows 95.

The font is Liberation Serif Bold Italic but a bit bigger.

(kinda)

Date: 2021-12-09

Same 'NeoCities' but with '(kinda)' written under

The main version of my website had been moved from Neocities, but I still used the latter as a mirror. In order not to accidentally gaslight people into thinking it didn't happen, I wrote a "(kinda)" under this button using the pencil tool. I could've done a better job drawing the letters, but whatever, the idea was questionable anyway.

Folder.

Date: 2021-12-29

Seemingly exactly the same folder. Or is it?

The shadow on top is shorter by 1 pixel. That's it, that's the difference.

🐻

Date: 2022-01-02

Bear in front of portable toilets, captioned 'Bruh, Ltd'
bruh-ltd.png

I realized how ridiculous "NeoCities (kinda)" looked and replaced it with a button I quickly made for Bruh, Ltd.

The bear was drawn by my friend in Paint.NET. Since nearest neighbor downscaling ruined its eyes, I manually touched them up a bit. The background image was taken from Public Domain Pictures. I don't remember what font I used, but it was probably either Liberation Sans or Nimbus Sans.

3 folders, 1 day

Date: 2022-04-21

The folder is now gray and open and the background is darker
Same folder but now pink
Same folder, still pink, but something is off

I decided that a Windows 95 aesthetic was boring, so I started looking for inspiration in Unix desktop environments, one of which was GNOME 1. Then I realized this gray looks ugly and remembered that Classic MacOS used purple as the accent color. My favorite color is pink, and that's close to purple, so I connected the dots and made the folder pink. Best decision I've ever made. It looks awesome.

By the way, the third version of the button is different - the folder was moved to the right by 1 pixel. I also centered my profile picture by using this awesome tool. And yeah, the darker border is now slightly pink too.

The Great Rename

Date: 2022-09-10

Same folder, but the caption is now 'Yours Truly'
yours-truly.png

My initials are no longer K.K., so here's that. Since my new name is shorter, I made the home page layout narrower. 3 rows of buttons looked way too big, so I got rid of the World Wide Web and the Slap like NOW! buttons. Not a big loss, to be fair.

The phrase "Yours truly" was taken from the Super Mario 64 cutscene where Princess Peach invites Mario over to a dinner. I've never played that game, but the scene looks really cool. I even used it as the inspiration for my email page which I eventually moved to Bruh, Ltd.

I drew the letters by myself because Comic Neue Italic didn't look good at this resolution.

Conclusion

If you see any of these buttons online, now you know what time interval they initially came from.