My 88×31-pixel buttons!

Introduction

88×31-pixel buttons created by me. I don't reserve any rights to them, but the buttons based on others' work may come with their own licenses.

Unless otherwise mentioned, the buttons only use colours from the 216-colour web-safe palette (Wikipedia). They are more likely to display correctly on ancient computers.

You can also download all the buttons: 88x31-by-qalle.zip.

Pride buttons

Button Description Based on
6-colour rainbow rainbow Wikimedia Commons
6-colour rainbow, 5 chevrons (black, brown, cyan, magenta, white), purple circle on yellow intersex-inclusive progress pride Wikimedia Commons
purple circle on yellow background intersex pride Wikimedia Commons
5 horizontal stripes: light blue, pink, white, pink, light blue transgender pride Wikimedia Commons
4 horizontal stripes: yellow, white, purple, black nonbinary pride Wikimedia Commons
5 horizontal stripes: red, orange, white, light purple, dark purple lesbian pride Wikimedia Commons
5 horizontal stripes: dark green, light green, white, light blue, dark blue gay men pride Wikimedia Commons
3 horizontal stripes: thick red, thin purple, thick blue bisexual pride Wikimedia Commons
3 horizontal stripes: red, yellow, blue pansexual pride Wikimedia Commons
4 horizontal stripes: black, grey, white, purple asexual pride Wikimedia Commons
5 horizontal stripes: dark green, light green, white, grey, black aromantic pride Wikimedia Commons
gold heart on white background and 3 horizontal stripes: blue, red, purple polyamory pride Wikimedia Commons
black, blue, white, blue and black horizontal stripe and a red heart leather, latex and BDSM pride Wikimedia Commons
green, white and purple horizontal stripes and a black drawing consisting of a circle, a triangle and other lines nonhuman (therian, otherkin) pride Wikimedia Commons
overlapping sine waves in green, white and purple speciesqueer Pi on BlueSky
diagonal red, yellow, white, blue and green stripe on grey disability pride Wikimedia Commons
rainbow-coloured infinity symbol on yellow background autism pride (24-bit colour, not web-safe, 1681 bytes) a flag by Autistic Empire
rainbow-coloured infinity symbol on yellow background autism pride (64 colours, not web-safe, 768 bytes) a flag by Autistic Empire
rainbow-coloured infinity symbol on yellow background autism pride (web-safe, dithered, 726 bytes) a flag by Autistic Empire
a black and white 4-legged creature on yellow background autism creature a drawing on Reddit
a black and white 4-legged creature with a trailing 6-colour rainbow on yellow background autism creature with trailing rainbow a drawing on Reddit
a black and white 4-legged creature in front of horizontal rainbow stripes autism creature with horizontal rainbow stripes a drawing on Reddit
a black and white 4-legged creature in front of a circular rainbow gradient autism creature with circular rainbow a drawing on Reddit
the head of a white blushing and smiling cat on yellow background boykisser a drawing on SilvaGunner Wiki
the head of a white blushing and smiling cat in front of horizontal rainbow stripes boykisser with horizontal rainbow stripes a drawing on SilvaGunner Wiki
the head of a white blushing and smiling cat in front of a circular rainbow gradient boykisser with circular rainbow a drawing on SilvaGunner Wiki
the head of a black and red smiling dragon on yellow background Bad Dragon Bad Dragon logo on Wikipedia
the head of a black and red smiling dragon in front of horizontal rainbow stripes Bad Dragon with horizontal rainbow stripes Bad Dragon logo on Wikipedia
the head of a black and red smiling dragon in front of a circular rainbow gradient Bad Dragon with circular rainbow Bad Dragon logo on Wikipedia
a teal and white shark on orange background IKEA Blåhaj (blue shark) IKEA – BLÅHAJ product photo
a teal and white shark in front of the transgender flag IKEA Blåhaj (blue shark) and the transgender flag IKEA – BLÅHAJ product photo

VGA pronoun buttons

Third-person personal pronouns in the VGA font. Only the buttons with six characters or less (“he/him” etc.) have the authentic 20:27 pixel aspect ratio; I've had to squish all other texts horizontally by varying amounts. See also “Appendix: the VGA font” below. Source for neopronouns: Pronouns.page.

she/her she/her with transgender flag background she/they they/she they/them they/them with nonbinary flag background they/he he/they he/him he/him with transgender flag background it/its ae/aer ey/em fae/faer xe/xem ze/hir ze/zir

All the pronouns in 1:2 pixel aspect ratio (in case I need to redo the buttons):

all the pronouns in VGA font

CGA pronoun buttons

Third-person personal pronouns in the CGA font. All texts have a pixel aspect ratio of 5:12 which should be authentic. See also “Appendix: the CGA font” below. Source for neopronouns: Pronouns.page.

she/her she/her with transgender flag background she/they they/she they/them they/them with nonbinary flag background he/they they/he he/him he/him with transgender flag background it/its ae/aer ey/em fae/faer xe/xem ze/hir ze/zir

All the pronouns in 1:2 pixel aspect ratio (in case I need to redo the buttons):

all the pronouns in CGA font

Note to myself: How to create buttons with 5:12 pixel aspect ratio from the previous image:

  1. Crop the pronoun as if it always contained a letter with a descender (e.g. y), plus one empty pixel on top, bottom, left and right. That is, the height is always 18 px at the beginning.
  2. Resize the pronoun:
    • if 7 characters or less: height = 31, width = oldWidth × 155 / 108
    • if 8 characters or more: width = 88, height = 9504 / (5 × oldWidth)
  3. Pad to 88×31 pixels. If necessary, round position towards bottom left corner of image.

Microchip buttons

All the chips are 40-pin DIPs unless otherwise mentioned.

Button Description Based on
a chip with the MOS Technology logo MOS Technology MOS logo on Wikimedia Commons
a chip with the MOS Technology logo and the text 'inside' MOS Technology inside MOS logo on Wikimedia Commons
a chip with the Zilog logo Zilog Zilog early logo on Wikipedia
a chip with the Zilog logo and the text 'inside' Zilog inside Zilog early logo on Wikipedia
a 40-pin chip with the Motorola logo Motorola (40 pins) Motorola logo on Wikimedia Commons
a 64-pin chip with the Motorola logo Motorola (64 pins) Motorola logo on Wikimedia Commons
a 40-pin chip with the Motorola logo and the text 'inside' Motorola inside (40 pins) Motorola logo on Wikimedia Commons
a 64-pin chip with the Motorola logo and the text 'inside' Motorola inside (64 pins) Motorola logo on Wikimedia Commons
a chip with the Bad Dragon logo Bad Dragon Bad Dragon logo on Wikipedia
a chip with the Bad Dragon logo and the text 'inside' Bad Dragon inside Bad Dragon logo on Wikipedia

Retro PC buttons

Button Description Based on
the text 'C:\>_' in the white VGA font on black the DOS prompt in the VGA font; see also “Appendix: the VGA font” below  
the text 'C:\games>_' in the VGA font, white on black the DOS prompt in the VGA font; directory “games”  
the text 'C:\QBasic\>_' in the VGA font, white on black the DOS prompt in the VGA font; directory “QBasic”  
the text '640 KB OK' in the white CGA font on black the text “640 KB OK” in the CGA font –
the text 'all I need' in the white and magenta CGA font in front of the 16-colour CGA palette the CGA palette and the text “all i need” in the CGA font (non-web-safe palette) –
the text 'all U need' in the white and magenta CGA font in front of the 16-colour CGA palette the CGA palette and the text “all u need” in the CGA font (non-web-safe palette) –
a green fish viewed from right side Dopefish (an enemy from Commander Keen: Secret of the Oracle) – original (non-web-safe) colours, no borders my screenshot
a green fish viewed from right side Dopefish (an enemy from Commander Keen: Secret of the Oracle) – web-safe colours, with borders my screenshot

“Online since…” buttons

A button for every decade. VGA font (see “Appendix: the VGA font” below) but 1:1 pixel aspect ratio and letter spacing adjusted.

online since the '00s online since the '10s online since the '20s online since the '30s online since the '40s online since the '50s online since the '60s online since the '70s online since the '80s online since the '90s

Other buttons

Button Description Based on
the text 'system hacked!' and the command 'stealacar.exe' being entered; green on black with heavy scanline effects “System hacked!” and the command “stealacar.exe” being entered (green) –
the text 'system hacked!' and the command 'stealacar.exe' being entered; orange on black with heavy scanline effects “System hacked!” and the command “stealacar.exe” being entered (orange) –
a black envelope on green background; mimics LCD graphics an envelope (text message icon of a 1990s mobile phone) Nokia 5190 on Legacy Portable Computing Wiki
Hadrosaurus Software – white text on rainbow background (unofficial button!) Hadrosaurus Software – Logo & Icon
Hadrosaurus Software – rainbow dinosaur and white letter H (unofficial button!) Hadrosaurus Software – Logo & Icon
a grid of 18*12 colours and the text 'websafe' in black and white the web-safe palette –
Intel Inside? – No Thanks (a reference to “Nuclear Power? – No Thanks”) Intel logo, anti-nuclear logo
Palestine flag Palestine flag (original aspect ratio, no 3D effect, palette is not web-safe) Wikimedia Commons
Palestine flag Palestine flag (full width, has 3D effect, palette is not web-safe) Wikimedia Commons
taloussuklaa - hushållschoklad in white and yellow on red background Taloussuklaa chocolate K-Ruoka
a 500-mL can of EuroShopper energy drink, in red and grey EuroShopper (ES) energy drink (not web-safe) K-Ruoka
Lena's eyes Lena's eyes (24-bit colour, not web-safe, 5275 bytes) Morten Hannemose
Lena's eyes Lena's eyes (64 colours, not web-safe, 1488 bytes) Morten Hannemose
Lena's eyes Lena's eyes (web-safe, 1270 bytes) Morten Hannemose
an empty dark grey button with a raised edge an empty dark button with a raised edge –
an empty light grey button with a raised edge an empty light button with a raised edge –
black and white checkerboard pattern with varying rectangle sizes some kind of pattern –
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore lorem ipsum text Wikipedia
the word 'qalle' shown on blue 7-segment displays for linking to this site –

Appendix: the VGA font

In my buttons, I try to mimic the 720×400-pixel VGA text mode displayed on a 4:3 screen, so I aim for a pixel aspect ratio of 20:27 (approximately 0.741).

Here are all the ASCII characters in the VGA font. (Based on a screenshot of DOSBox.) Each character is 9×16 pixels and the pixel aspect ratio is 1:1 so the font looks horizontally stretched when viewed with square pixels.

characters 0x20 to 0x7E in VGA font, 16 characters per row

Here is the previous image with a scanline effect. Each character is 9×32 pixels and the pixel aspect ratio is 1:2 so the font looks horizontally squished when viewed with square pixels.

characters 0x20 to 0x7E in VGA font, 16 characters per row

Here is the font with a pixel aspect ratio of 3:4 so it looks almost correct when viewed with square pixels. Each character is 27×64 pixels. The second image has a scanline effect.

characters 0x20 to 0x7E in VGA font, 16 characters per row characters 0x20 to 0x7E in VGA font, 16 characters per row

Appendix: the CGA font

I use this CGA font. It's a screenshot of DOSBox. I've added a scanline effect to the second image. Each character is 8×16 pixels in the images, so the pixel aspect ratio is 1:2. I think the authentic pixel aspect ratio is 5:12 (640×200 pixels on a 4:3 screen).

characters 0x20 to 0x7E in CGA font, 16 characters per row characters 0x20 to 0x7E in CGA font, 16 characters per row