ritual.sh/content/resources/button-generator/index.md
2026-01-13 12:35:39 +00:00

41 lines
1.8 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.
---
### 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)
Am I missing you? Email me or send a webmention!