FABLED.DAY - creating a giant wall of buttons

Creating A Wall of Buttons

You can view a live demonstration of this snippet on Codepen, and even play with it a bit. The version I've provided fits a very pink and rosy aesthetic but should be easily customizable for yours...

On neocities-hosted sites, and others centered around nostalgia, it’s very common to exchange small, pixel-y images, usually gifs (often animated). These are used to link to each other’s sites, or even just to show one’s affiliation with a particular group or concept. Variations exist, but the most common version of these tend to be 88 pixels wide by 31 pixels tall. This coding snippet assumes that size, and would require the (hopefully obvious) changes if you’re using larger buttons.

Many people just add all of their buttons on one page at once with little formatting. You’ve likely seen these giant walls of buttons, each right after the other in a haphazard, ad hoc grid. I’m not attempting rudeness or anything, but I must say - that’s a little hard to navigate, isn’t it?

You can see the buttons (some of which might be animated, of course), but not the full site names necessarily, nor what they’re about. The “giant wall of buttons” isn’t good for your visitors. It can also make it difficult for you to find, remove, and update buttons.

My solution is a table. Back in the Before Times (early 2000s, roughly), some people used tables for a lot of the heavy lifting that CSS does now. This was terrible design at the time, because tables aren’t meant to be used that way. Tables are, however, meant to be used for, well… displaying information in a table. So… why not do that? Nowadays, I mean?

It works great for the buttons, plus a little info about the sites they represent, providing a header, and most necessary features.

CSS

I’ll admit I went a little crazy with the CSS; cope, or change it - I do expect colors changed either way, since your site likely looks completely different than the demonstration here, which shows exactly what these colors look like. I may create some more sedate, easier-to-customize versions of this. Please realize that while the table itself is the key part of the equation here, it’ll look absolutely awful without a little bit of CSS, in all likelihood. Sad but true.

/* styling the table itself */
    table.outlinks {
        margin: 2em auto;
        width: 60%; /* please change width of table as you fancy, as well as top-bottom margin, but if you leave the left-right margins set to auto, it will remain centered */
        background-color: #fdc0c0; /* color of the table cell's background (except the header) */
        border-collapse: separate;
        border-spacing: 0;
        border: 5px solid #f8a4a1; /* color of the border surrounding the entire thing*/
        color: #50330b;
        border-radius: 5px;
        overflow: hidden;
    }
    
    table.outlinks td,
    table.outlinks th {
        border: 5px solid #f8a4a1; /* inner border, looks best if same color as outer */
        padding: 0.2em;
        vertical-align: middle;
    }
    /* below styles the header of the table */
    table.outlinks th {
        font-size: 1.3em;
        color: #ba615f;
    }
    
    table.outlinks thead {
        background-color: #f8a4a1;
    }
    
    /* making sure the buttons have the correct amount of space within the first row of cells; change if using a different button size */
    table td:first-child {
        width: 88px;
        height: 31px;
    }
    
    /* links within the table, styled as simply as possible changing background color and text color */
    table.outlinks a {
        color: #ba615f;
        text-decoration: none;
        position: relative;
        border-radius: 0.1em;
        transition: ease 1s all;
    }
    
    table.outlinks a:hover {
        background-color: #ba615f;
        color: #fdc0c0;
    }
    
    /* making sure the hover link animation does not effect the background of the buttons, which might be transparent */
    table td:first-child a:hover {
        background-color:#fdc0c0;
    }

HTML

The HTML itself is merely a table, featuring a series of rows with the buttons in the first column, the site title in the second, and the site description in the final column. If you’re not familiar with HTML tables (they aren’t often used these days that I’ve seen), don’t fret; they’re fairly intuitive. Just insert your own URLs and information where necessary and you’ll be moving. The below version includes only one row for a single linking image, but you can copy and paste it, of course. That’s the idea.

<table class="outlinks" id="outlinks">
	<!-- below is the header of the table -->
	<thead>
		<tr>
			<th>Button</th>
			<th>Title</th>
			<th>Description</th>
		</tr>
	</thead>
	<!-- the body of the table below contains all the buttons, titles, etc themselves. please leave the inline styles for images in there - they're crucial -->
	<tbody>
		<!-- below begins a single row featuring one site -->
		<tr>
			<td>
				<!-- image and link to site go here. right now, there's this example as a stand-in; please remove it -->
				<a href="https://fabled.day" target="_blank"><img src="https://www.fabled.day/image/banner88.gif"></a>
			</td>
			<td>Site title goes here.</td>
			<td>Site Description goes here.</td>
		</tr>
		<!-- here ends a single row featuring one site -->

		<tr>
			<td>
				<!-- image and link to site go here. right now, there's this example as a stand-in; please remove it -->
				<a href="https://fabled.day" target="_blank"><img src="https://www.fabled.day/image/banner88.gif"></a>
			</td>
			<td>Site title goes here.</td>
			<td>Site Description goes here.</td>
		</tr>
		<tr>
			<td>
				<!-- image and link to site go here. right now, there's this example as a stand-in; please remove it -->
				<a href="https://fabled.day" target="_blank"><img src="https://www.fabled.day/image/banner88.gif"></a>
			</td>
			<td>Site title goes here.</td>
			<td>Site Description goes here.</td>
		</tr>
		<tr>
			<td>
				<!-- image and link to site go here. right now, there's this example as a stand-in; please remove it -->
				<a href="https://fabled.day" target="_blank"><img src="https://www.fabled.day/image/banner88.gif"></a>
			</td>
			<td>Site title goes here.</td>
			<td>Site Description goes here.</td>
		</tr>
		<tr>
			<td>
				<!-- image and link to site go here. right now, there's this example as a stand-in; please remove it -->
				<a href="https://fabled.day" target="_blank"><img src="https://www.fabled.day/image/banner88.gif"></a>
			</td>
			<td>Site title goes here.</td>
			<td>Site Description goes <a href="#">here</a>.</td>
		</tr>

		<!-- goodnight, table -->
	</tbody>
</table>

Optional JavaScript

There is this JavaScript component that you can use if you so choose. It is not a necessary part of the button wall, though, which will function just fine without the inclusion of the script. So, what does the JavaScript do? It randomizes the buttons. That’s right. It randomizes the rows in the table, such that the buttons (and site titles and descriptions) appear in a random order on the page. This ensures that those added first (or last) don’t necessarily appear first or last, giving every button an opportunity! No playing favorites!

function shuffle() {
	let table = document.getElementById("outlinks");
	let tbody = table.getElementsByTagName("tbody")[0];
	let rows = Array.from(tbody.getElementsByTagName("tr"));

	rows.sort(() => Math.random() - 0.5);

	tbody.innerHTML = "";

	rows.forEach((row) => tbody.appendChild(row));
}

window.onload = shuffle;