I made an 88x31 e-mail button
I recently threw together a pixel dump for my blog, which includes a little dropdown box of blinkies and buttons. If you're on desktop, you can view it by clicking the stamp icon in the top left. (I'm debating whether I should keep the stamp icon or switch it out for a plain button icon.)
I couldn't find an e-mail button I liked well enough, so I decided to make my own!
Ta-da!
How I Made It
To make it, I used the 88x31 Web Button Maker site to get the basic button and text.
I added an envelope HTML symbol at the end. It wasn't snazzy enough for my liking. Also the website can't make .gifs, and I wanted it to be animated.
Here is the initial raw .png file I exported from the site:
Krita
Initially, I was just going to do make the envelope symbol blink. But once I loaded it into Krita, I realized it looked a little plain, so I filled it in with white. This left a weird dark spot in the center where all the lines of the character itself converge, so I covered it up with a cute little heart. I also added stronger border colors to get a sharper outset effect on the edges of the button.
GIMP
I don't know how to animate stuff in Krita, but I used to do lots of little pixel animations in GIMP when I was a teenager. I jumped back in and the outdated UI was a huge nostalgia trip.
GIMP is really great for simple animations. It just exports each layer as an animation frame. In the File > Render Animation dialog box, you can set intervals between each frame to control the animation speed. I set mine to 400 milliseconds.
Here are the two "frames" I used:
Yay, Buttons!
I'm really happy with the resulting .gif, and I'm having a lot of fun decorating my blog. I'm going to make a button for my blog soon that I'll put in the footer.
I started a list of code/graphics resources, which you can view here ; it includes all of the sites I get buttons, etc from.
✘ Posted on — 03/22/25
✘ Last modified — 5 months ago
✘ Link — https://blog.xavierhm.com/i-made-an-88x31-e-mail-button