{"id":10561,"date":"2026-07-29T17:08:55","date_gmt":"2026-07-29T22:08:55","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10561"},"modified":"2026-07-29T17:08:56","modified_gmt":"2026-07-29T22:08:56","slug":"a-button-that-links-to-a-random-post-in-html-css-only","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/a-button-that-links-to-a-random-post-in-html-css-only\/","title":{"rendered":"A Button That Links to a Random Post in HTML & CSS Only"},"content":{"rendered":"\n

I was reading a post by Jim Nielsen where he was Making a Shuffle Button<\/a>. It was for a static site, so there was no server-side code to hit to redirect to a random post. PHP, for instance, could query for all posts and select one pseudo-randomly, and redirect there. But no such language on a static site.<\/p>\n\n\n\n

Take One<\/h2>\n\n\n\n

Instead, Jim did this (at first):<\/p>\n\n\n

<!-- In the site navigation --><\/span>\n<button<\/span> id<\/span>=\"js-shuffle\"<\/span>><\/span>Shuffle<\/button<\/span>><\/span>\n\n<!-- Way down at the end of the HTML --><\/span>\n<script<\/span>><\/span>\n  \/\/ All 974 note IDs injected by my SSG\n  const noteIds = ['id-1', 'id-2', id-3', 'id-4', '...'];\n  document.querySelector(\"#js-shuffle\")\n    .addEventListener('click', () => {\n      \/\/ randomly grab an item in `noteIds`\n      const randomId = '...';\n      window.location.href = `\/n\/${randomId}\/`\n    })\n<\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The issue with this approach is that Jim inlined it on every single HTML page and thus every page had to be re-built during deployment if a new post was published. I do feel like saying JIM THIS COULD HAVE BEEN A WEB COMPONENT and built as a single file and imported, but I’ll refrain. <\/p>\n\n\n\n
Then Jim went through 3-4 other techniques that also worked, each with its ups and downs. I like the technique Jim landed on, which was making a single page that handled the job and redirected away. Basically like the solution above, just at a shuffle.html<\/code> page and ran automatically.<\/p>\n\n\n\n
I’m afraid I don’t have an\u00a0improvement<\/em>\u00a0for Jim, per se, but it made me think of another potential solution. <\/p>\n\n\n\n
What if it depended on where<\/em> you clicked the random button?<\/h2>\n\n\n\n
I mean, we’re talking about a physical button here, right? So I’m talking literally what pixel you clicked on on the button would determine which random post you go to.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
We could get these coordinates in JavaScript, but I don’t think we need to. We can just fill the area with <a><\/code> links that go to the posts. So it’s not a single button, it’s just a button-like shape full of tiny buttons (links, actually). <\/p>\n\n\n\n
To this, we could do like:<\/p>\n\n\n
<div<\/span> class<\/span>=\"random-button\"<\/span>><\/span>\n  <a<\/span> href<\/span>=\"\/post\/1\"<\/span>><\/span>Post 1<\/a<\/span>><\/span>\n  <a<\/span> href<\/span>=\"\/post\/2\"<\/span>><\/span>Post 2<\/a<\/span>><\/span>\n  <a<\/span> href<\/span>=\"\/post\/3\"<\/span>><\/span>Post 3<\/a<\/span>><\/span>\n  ...\n  <span<\/span>><\/span>Random Post<\/span<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Then we just let the links lay out naturally within the button space:<\/p>\n\n\n
.random-button<\/span> {\n  display<\/span>: flex;\n  flex-wrap<\/span>: wrap;\n  align-content<\/span>: stretch;\n  position<\/span>: relative;\n  overflow<\/span>: hidden;\n\n  \/* make it look like a button *\/<\/span>\n  inline-size<\/span>: 300px<\/span>;\n  border-radius<\/span>: 14px<\/span>;\n\n  > a {\n    \/* whatever sizing works *\/<\/span>\n    flex<\/span>: 1<\/span> 1<\/span> 30px<\/span>;\n  }\n\n  > span<\/span> {\n    pointer-events<\/span>: none;\n    position<\/span>: absolute;\n    inset<\/span>: 0<\/span>;\n    display<\/span>: grid;\n    place-items<\/span>: center;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This flexbox setup, with the stretchy alignment and flex-grow allowance, should fill the space nicely.<\/p>\n\n\n\n\t\t
\n\t\t\t