Sometimes the simplest interface ideas can have the biggest impact. A "Surprise Me" button is one of those, redirecting users to a random page on your site with just a click. No filters, no dropdowns, just a little mystery that encourages curiosity.
It’s a fun and effective way to guide visitors deeper into your content without making them choose where to go next. It adds a playful twist that keeps users exploring.
- Encourages deeper engagement by letting users discover more content
- Increases page views and time on site, especially for blogs or creative portfolios
- Incredibly easy to implement with just HTML, a few lines of JavaScript, and a list of URLs
- Keeps your site feeling fresh for repeat visitors by showing them something new each time
It’s especially handy for highlighting evergreen or under-the-radar content, giving it new life without needing complicated logic or extra tools.
Step 1: Set Up Your HTML Button
Before we dive into the JavaScript, first start by creating the button itself. This will be the interactive element users click to trigger the random page redirect.
You only need a simple <button> element with an ID so we can target it in JavaScript later:
<button id="surpriseButton">Surprise Me!</button>
You can place this button anywhere on your page, inside your navigation bar, in a sidebar, or even on a 404 page. Just make sure it’s placed somewhere logical and easy to spot.
Tip: For accessibility and SEO, stick with a <button>
rather than an <a>
tag styled like a button. Buttons are more semantically appropriate for triggering actions like this one.
Step 2: Create an Array of URLs
Now that the button is in place, it’s time to define where the "Surprise Me" button can take the user. We’ll do this by creating an array of URLs in JavaScript. This array will serve as your pool of destinations. When the button is clicked, the script will randomly pick one of these URLs and redirect the user to it.
Add Your Page Links
You can include internal links, external links, or a mix of both, just be sure each entry is wrapped in quotes and separated by commas.
Here’s a basic example using internal links for a blog:
const pages = [
"https://e-dimensionz.com/blog",
"https://e-dimensionz.com/about/about-us",
"https://e-dimensionz.com/blog/you-have-an-app-idea-but-what-do-you-do-next",
"https://e-dimensionz.com/blog/step-by-step-how-to-prepare-for-a-website-migration",
"https://e-dimensionz.com/blog/signs-youve-outgrown-your-no-code-platform"
];
Tip: If your site uses a CMS like WordPress, Joomla, or a static site generator, you can generate this list dynamically. But for simplicity, we’re hardcoding it here.
Example with External Links
You can also include full URLs to external pages or partner sites:
const pages = [
"https:/edz.dev",
"https://e-dimensionz.com/about/about-us",
"https://e-dimensionz.com/blog",
"https://wyldcode.com",
"https://wyldapi.com"
];
Just make sure the links are correct and relevant to the context of where you place the button.
Step 3: Add JavaScript to Pick a Random URL
Now that you have your list of URLs ready, it’s time to bring your "Surprise Me" button to life with a little JavaScript.
The core idea is simple:
- Use
Math.random()
to select a random index from your array. - Redirect the browser to that URL using
window.location.href
.
How It Works
Math.random()
returns a decimal between 0 and 1.Math.floor()
rounds that down to the nearest whole number.- Multiplying
Math.random()
by the array length gives us a valid index.
Add the JavaScript
Here's a complete example assuming you’ve already created your pages array:
<script>
const pages = [
"https://e-dimensionz.com/blog",
"https://e-dimensionz.com/about/about-us",
"https://e-dimensionz.com/blog/you-have-an-app-idea-but-what-do-you-do-next",
"https://e-dimensionz.com/blog/step-by-step-how-to-prepare-for-a-website-migration",
"https://e-dimensionz.com/blog/signs-youve-outgrown-your-no-code-platform"
];
document.getElementById("surpriseButton").addEventListener("click", () => {
const randomIndex = Math.floor(Math.random() * pages.length);
const randomPage = pages[randomIndex];
window.location.href = randomPage;
});
</script>
What This Does
- It waits for a click on the button with
id="surpriseButton"
. - Then it picks a random URL from the pages array.
- Finally, it redirects the browser to that URL.
This technique is super flexible and can be reused anywhere you want to create dynamic, randomized navigation.
Step 4: Add Some Styling
Now that your Surprise Me button works, let’s give it a bit of flair. A well-designed button doesn’t just look nice, it invites clicks.
Here’s a simple base style to start:
#surpriseButton {
background-color: #3c7cff;
color: white;
padding: 0.75em 1.5em;
border: none;
border-radius: 0.5em;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
Add Interactions (Hover/Focus)
#surpriseButton:hover,
#surpriseButton:focus {
background-color: #2a5edb;
transform: scale(1.05);
outline: none;
}
Add a Pulse Animation (Optional)
If you want to draw attention to the button, on a homepage or 404 page, for example, try a soft pulsing glow:
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(60, 124, 255, 0.6);
}
50% {
box-shadow: 0 0 0 10px rgba(60, 124, 255, 0);
}
}
#surpriseButton.pulse {
animation: pulse 2s infinite;
}
Just add the pulse class to the button:
<button id="surpriseButton" class="pulse">Surprise Me!</button>
Bonus Tips
Avoid Redirecting to the Current Page
If you want to prevent the user from being "surprised" by the page they’re already on, add a quick check before redirecting:
const currentPage = window.location.pathname;
let randomPage;
do {
randomPage = pages[Math.floor(Math.random() * pages.length)];
} while (randomPage === currentPage);
window.location.href = randomPage;
Make It Keyboard-Accessible
Because you’re using a native <button>
, it already supports:
- Enter key activation
- Focus via Tab
- Screen reader labeling
To improve UX further, use a clear aria-label
if the button uses only an icon or emoji
<button id="surpriseButton" aria-label="Click to visit a random page">🎲</button>
Use It for External Links
Want to link to external sites like a random blog article, product, or playlist? Just include full URLs:
const pages = [
"https://www.youtube.com/@e-dimensionz/videos",
"https://www.linkedin.com/company/e-dimensionz-web-solutions",
"https://wyldcode.com/"
];
It works exactly the same way, just be mindful of cross-origin behaviour (e.g. opening in the same tab vs. a new tab).
If you're linking to external URLs and want them to open in a new tab, replace window.location.href with:
window.open(randomPage, "_blank");
With a polished button and a few smart extras, your Surprise Me feature is functional and fun. Now your visitors have a reason to click, explore, and stay longer.
Real-World Ideas
The beauty of a "Surprise Me" button is its flexibility. It’s simple under the hood, but it can enhance the user experience in creative, meaningful ways, especially when integrated thoughtfully into your site’s structure.
Surprise Me: Blog Post Discovery
Give your readers a way to explore older, niche, or evergreen content with one click. Instead of relying solely on categories or pagination, a Surprise Me button can:
- Surface lesser-known posts
- Increase time-on-site
- Encourage discovery beyond the homepage
Great for: Personal blogs, tutorials, news archives, dev journals
Random Portfolio Project Feature
If you’re a freelancer, agency, or creative showcasing work, a Surprise Me button adds a playful twist to the portfolio experience. It’s perfect for:
- Highlighting different client projects
- Breaking visitors out of scrolling patterns
- Adding interactivity to your homepage or "Our Work" section
Tip: Pair it with visual transitions or brief project summaries to tease content before redirecting.
Product Recommendation
eCommerce doesn’t have to be all about filtering and categories. A Surprise Me button on a product page can act like a “digital dice roll" to:
- Suggest alternate products
- Highlight seasonal or promotional items
- Offer an unexpected discovery moment (like “Feeling Lucky?”)
Ideal for: Niche shops, boutique items, themed stores (e.g. socks, books, collectibles)
404 Fallback Suggestion
Turn a dead-end into a win. Instead of a plain “Page Not Found” message, offer a "Try a Random Page Instead" button to help users stay on your site.
Pair it with helpful messaging like:
- "Oops! That page doesn’t exist anymore. But hey, how about something completely different?"
Result: Better retention, more clicks, and a friendlier 404 experience.
Surprise Me! Demo
Let Curiosity Drive the Journey
Sometimes the best UX feature is the one that surprises your users in the best possible way.
This is just the beginning. Once you’ve got the core working, consider taking it further:
- Track button clicks with Google Analytics or another tool to see what users engage with
- Store the last visited page in localStorage to avoid repeats
- Use category-based filters to create different pools (e.g., blog vs. projects)
With a little creativity, your Surprise Me button can evolve from a playful extra into a smart, UX-boosting feature.