42 lines
1.9 KiB
Markdown
42 lines
1.9 KiB
Markdown
---
|
|
title: "88x31 Button Creator"
|
|
date: 2026-01-08
|
|
description: "Make custom 88x31 pixel buttons with text, colors, gradients, and textures"
|
|
icon: "button-generator"
|
|
demo_url: ""
|
|
source_url: ""
|
|
draft: false
|
|
---
|
|
|
|
Welcome to my 88x31 button creator, this is a pretty rough and ready implementation so it could be buggy, please let me know if you find any issues.
|
|
|
|
This supports gif despite the basic `canvas` tag limitation courtesy of [gif.js](https://github.com/jnordberg/gif.js) - none of this would be possible without that project.
|
|
|
|
Big thanks to [neonaut's 88x31 archive](https://neonaut.neocities.org/cyber/88x31) and everyone who made the buttons that appear there. You should check it out if you need inspiration for your button!
|
|
|
|
**Important note:** Some effects and animations stack, some don't. Some work better with certain lengths of text or variables depending on text length. Experiment, see what happens.
|
|
|
|
{{< button-generator >}}
|
|
|
|
---
|
|
|
|
### Changelog
|
|
|
|
- 07/01/2025 - Initial release.
|
|
- 08/01/2025 - Total refactor to be modular, added many more effects.
|
|
- 09/01/2025 - Rewrote the bevel inset and outset border code so they look a lot nicer at the corners. Updates throughout so that multibyte (emoji!) characters should work.
|
|
- 13/01/2025 - Added ticker scrolling and flashing text options. Added a background image selector.
|
|
- 22/01/2025 - Added a few new effects and multiple new fonts. Send font requests if you want something specific!
|
|
|
|
---
|
|
|
|
### Cool People Who Have Linked To This Project
|
|
|
|
[tdh.se](https://tdh.se/2026/01/88x31-pixlar-retroknapp/),
|
|
[rknight.me](https://rknight.me/blog/88x31-button-curios/),
|
|
[fyr.io](https://fyr.io/scrap/2026-01-09),
|
|
[brennan.day](https://brennan.day/resources-for-the-personal-web-a-follow-up-guide/),
|
|
[kuemmerle.name](https://kuemmerle.name/bastelglueck/),
|
|
[craney.uk](https://craney.uk/posts/stuff-this-week-74), <span data-webmention-list></span>
|
|
|
|
Am I missing you? Email me or send a webmention!
|