--- title: A Button That Links to a Random Post in HTML & CSS Only... description: A creative CSS-only approach to building a 'random post' button for static sites, inspired by Jim Nielsen's shuffle button. Instead of JavaScript, the... canonical: https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Button That Links to a Random Post in HTML & CSS Only – Master.dev Blog | daily.dev og:description: A creative CSS-only approach to building a 'random post' button for static sites, inspired by Jim Nielsen's shuffle button. Instead of JavaScript, the... og:url: https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg og:image: https://api.daily.dev/og/posts/GzrkKVVhG.png og:image:alt: A Button That Links to a Random Post in HTML & CSS Only – Master.dev Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # A Button That Links to a Random Post in HTML & CSS Only – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 4 min read · 3 upvotes · 1 comments ## Summary A creative CSS-only approach to building a 'random post' button for static sites, inspired by Jim Nielsen's shuffle button. Instead of JavaScript, the technique fills a button-shaped container with invisible anchor links to all posts using flexbox. Where the user clicks determines which post they navigate to. The approach is enhanced with the CSS `random()` function and `reading-flow: flex-visual` to randomize link order on each page load, making it work in Safari and Chrome (with flag). The result is a no-JavaScript, client-side randomization solution that re-randomizes on every page load. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I make a button that links to a random post using only HTML and CSS, no JavaScript? Fill a button-shaped flex container with many anchor links (one per post) plus a visually centered label span, using flex-wrap and stretch alignment so links fill the whole clickable area. Wherever the user clicks lands on a different link. Set opacity:0 on the links so it looks like a single button while still linking to different posts. _developers experimenting with CSS-only UI tricks can find more flexbox and layout techniques through daily.dev._ ### Which browsers currently support the CSS random() function for randomizing values like flex order? The CSS random() function works in Safari and in Chrome behind an experimental flag, so it is not yet broadly supported. It can be combined with flex order to randomize link placement, using order: random(1, 9999) inside a flex container, though this remains an emerging capability rather than a stable cross-browser feature. _tracking emerging CSS features like random() before relying on them in production is easier with daily.dev._ ### Does using the CSS order property to randomize flex item order cause accessibility problems? Yes, changing visual order with the flex order property can create a mismatch between visual order and keyboard tab order, which is a known accessibility concern. This can be mitigated by applying the reading-flow: flex-visual property, which aligns the reading and focus order with the visual order shown on screen. _developers weighing visual tricks against accessibility tradeoffs can dig deeper into CSS layout pitfalls via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@lauramoss** · 1 upvotes >  ## Similar posts on daily.dev - [Random Post Button Followup – Master.dev Blog](https://daily.dev/posts/random-post-button-followup-master-dev-blog-wbgcaq5bu) · Frontend Masters · 4 upvotes · 0 comments - [More CSS random\(\) Learning Through Experiments – Frontend Masters Blog](https://daily.dev/posts/more-css-random-learning-through-experiments-frontend-masters-blog-74bldwjii) · Frontend Masters · 4 upvotes · 0 comments - [Randomly Place an Element Along Edge of Another Element – Master.dev Blog](https://daily.dev/posts/randomly-place-an-element-along-edge-of-another-element-master-dev-blog-s8zowbf9a) · Frontend Masters · 3 upvotes · 0 comments - [Let’s Use the Emergent CSS random\(\) Function in all the Browsers](https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka) · CSS-Tricks · 2 upvotes · 0 comments - [Experimenting with random\(\) in CSS](https://daily.dev/posts/experimenting-with-random-in-css-ouj2w2eta) · Polypane · 15 upvotes · 6 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A Button That Links to a Random Post in HTML & CSS Only – Master.dev Blog","url":"https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg"},"datePublished":"2026-07-29T22:12:16.174Z","dateModified":"2026-09-14T08:47:25.198Z","description":"A creative CSS-only approach to building a 'random post' button for static sites, inspired by Jim Nielsen's shuffle button. Instead of JavaScript, the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/33f3a966e08dfc1d6599ebdd64c6bba1?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/33f3a966e08dfc1d6599ebdd64c6bba1?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,html","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"A Button That Links to a Random Post in HTML & CSS Only – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg","comment":[{"@type":"Comment","text":"","datePublished":"2026-07-30T07:32:08.520Z","url":"https://daily.dev/posts/GzrkKVVhG#c-DcnXhWfQS","author":{"@type":"Person","name":"Laura Moss","url":"https://daily.dev/lauramoss","image":"https://media.daily.dev/image/upload/s--ILA7G36z--/f_auto/v1780041334/avatars/avatar_4TSk50CCsSpOp4p8ftPwn?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/a-button-that-links-to-a-random-post-in-html-css-only-master-dev-blog-gzrkkvvhg#faq","mainEntity":[{"@type":"Question","name":"How can I make a button that links to a random post using only HTML and CSS, no JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Fill a button-shaped flex container with many anchor links (one per post) plus a visually centered label span, using flex-wrap and stretch alignment so links fill the whole clickable area. Wherever the user clicks lands on a different link. Set opacity:0 on the links so it looks like a single button while still linking to different posts. developers experimenting with CSS-only UI tricks can find more flexbox and layout techniques through daily.dev."}},{"@type":"Question","name":"Which browsers currently support the CSS random() function for randomizing values like flex order?","acceptedAnswer":{"@type":"Answer","text":"The CSS random() function works in Safari and in Chrome behind an experimental flag, so it is not yet broadly supported. It can be combined with flex order to randomize link placement, using order: random(1, 9999) inside a flex container, though this remains an emerging capability rather than a stable cross-browser feature. tracking emerging CSS features like random() before relying on them in production is easier with daily.dev."}},{"@type":"Question","name":"Does using the CSS order property to randomize flex item order cause accessibility problems?","acceptedAnswer":{"@type":"Answer","text":"Yes, changing visual order with the flex order property can create a mismatch between visual order and keyboard tab order, which is a known accessibility concern. This can be mitigated by applying the reading-flow: flex-visual property, which aligns the reading and focus order with the visual order shown on screen. developers weighing visual tricks against accessibility tradeoffs can dig deeper into CSS layout pitfalls via daily.dev."}}]} ```