Retro web buttons, particularly the classic 88×31 pixel graphics, are experiencing a massive resurgence in popularity. These small, rectangular images were once the staple of the early internet, serving as links, badges, and decorative elements on personal homepages during the late 1990s and early 2000s. Whether you are building a personal blog, a digital garden, or a niche community site, these nostalgic UI elements can add character and a sense of community to your design.
Finding and implementing these assets requires a bit of knowledge about where they are archived and how to properly display them on modern platforms. This guide will walk you through the history of these buttons, where to find high-quality archives, and how to add them to your own website with ease.
The History of the 88×31 Button
In the early days of the web, bandwidth was limited and screen resolutions were low. Web designers needed a way to link to other sites or display awards without cluttering their pages with large images. The 88×31 pixel format became the industry standard for these small banners, often referred to as “buttons” or “micro-bars.”
These buttons were frequently used for “webrings,” which were groups of websites linked together by a common theme. By placing a button on your site, you could show support for a specific browser, a favorite hobby, or a fellow creator. Today, these graphics are used to evoke a sense of “Old Web” nostalgia and to support the “Indie Web” movement, which prioritizes personal ownership of digital content.
Where to Find Retro Web Button Archives
Because many of the original hosting services from the 90s have disappeared, finding these buttons often involves searching through digital archives. Fortunately, dedicated enthusiasts have spent years collecting and categorizing thousands of these graphics to ensure they are not lost to time.
Digital Preservation Projects
Several online repositories act as museums for early web graphics. These sites often organize buttons by category, such as technology, music, gaming, or personal interests. When searching these archives, look for collections labeled as “88×31,” “web buttons,” or “site badges.” These collections often feature both static and animated GIF files.
Button Walls and Link Directories
Many modern personal websites feature a “button wall” or a links page. These pages are excellent places to find buttons because the owners often encourage visitors to copy the images and link back to the source. If you see a button you like on a peer’s website, it is common practice to save the image and host it on your own server.
Community-Driven Collections
Platforms that focus on creative coding and personal expression often host user-generated collections of retro assets. You can find massive folders of buttons on collaborative platforms where users share assets for “Small Web” projects. These collections are frequently updated with both authentic vintage buttons and modern buttons made in the retro style.
How to Download and Save Web Buttons
Once you find a collection of buttons you like, saving them is a straightforward process. However, there are a few best practices to keep in mind to ensure the images remain high quality and function correctly on your site.
- Right-Click and Save: Most archives allow you to simply right-click an image and select “Save Image As.” Always save the file in its original format, which is usually .gif or .png.
- Check for Animation: Many retro buttons use animation to grab attention. Ensure that when you save the file, it retains its .gif extension so the animation remains intact.
- Organize Your Files: If you are planning to use multiple buttons, create a dedicated folder in your website’s directory named “assets” or “buttons” to keep things organized.
- Avoid Hotlinking: It is considered poor etiquette to link directly to an image hosted on someone else’s server. This uses their bandwidth and may result in the image breaking if they move the file. Always download the image and host it yourself.
Implementing Buttons on Your Website
Adding a retro button to your website involves basic HTML. Because these buttons are typically used as links, you will want to wrap the image tag in an anchor tag. This allows visitors to click the button and be taken to the destination site.
The Basic HTML Structure
To display a button that links to another site, use the following structure in your HTML file:
<a href="https://destination-url.com"><img src="path/to/button.gif" alt="Description of the site" width="88" height="31"></a>
Using the “alt” attribute is essential for accessibility. It provides a text description for users who use screen readers or if the image fails to load. Including the width and height attributes helps the browser reserve the correct amount of space on the page, preventing layout shifts during loading.
Styling Your Button Collection
If you have a collection of buttons, you may want to display them in a grid or a row. You can use CSS to ensure they are spaced evenly and look professional. A simple flexbox container is often the best solution for a button wall.
.button-container { display: flex; flex-wrap: wrap; gap: 10px; }
This CSS code will allow your buttons to sit side-by-side and wrap to the next line if the screen is too narrow, which is perfect for mobile responsiveness.
Creating Your Own Retro Buttons
If you cannot find a button that fits your specific needs, creating your own is a fun way to contribute to the community. You do not need professional graphic design software to make a high-quality 88×31 button.
Using Pixel Art Tools
Since the resolution is so small, pixel art tools are the most effective way to design these graphics. There are many free online pixel editors that allow you to work at a 1:1 scale. When designing, focus on high-contrast colors and simple fonts that are readable at a small size.
Design Tips for Small Scales
- Limit Your Palette: Using too many colors can make a small image look muddy. Stick to 4-8 colors for a clean look.
- Use Pixel Fonts: Standard fonts often become unreadable when scaled down to 31 pixels high. Search for “pixel fonts” or “bitmap fonts” specifically designed for small displays.
- Keep it Simple: Avoid complex logos. A simple icon and a few words of text are usually enough to convey your message.
- Add a Border: Most classic buttons have a 1-pixel border. This helps the button stand out against different background colors.
The Ethics of Using Archived Assets
While the culture of the early web was built on sharing, it is important to be respectful when using archived assets. Most buttons were created to be shared freely, but some may represent specific organizations or personal brands. If a button includes a “Creative Commons” license or a specific request from the creator, be sure to follow those guidelines.
Generally, if a button is part of a public archive or a “link back” collection, it is intended for public use. If you are using a button to link to another person’s site, it is a nice gesture to let them know you’ve added them to your links page. This helps build the community connections that these buttons were originally designed to foster.
Conclusion
Retro web buttons are more than just nostalgic graphics; they are a symbol of a more personal and connected internet. By finding these assets in dedicated archives and implementing them correctly on your site, you can participate in a long-standing tradition of web design. Whether you are using vintage buttons from the 90s or creating your own modern versions, these small 88×31 graphics add a unique touch of personality to any project.
If you found this guide helpful, consider exploring more articles on web design basics and digital preservation to further enhance your online presence. Building a website is an ongoing journey of creativity and learning, and there are always new ways to make your corner of the internet feel like home.