Want to fine-tune how your buttons look, move or react? With Custom CSS, you can go beyond Stornaway’s standard button settings to create truly bespoke interactive experiences.

Custom CSS is an extremely powerful feature and lets you:

• Match your brand: Use your own colours, fonts, and styling to keep everything on-brand.

• Draw attention to key moments: Animate or highlight choice buttons when it’s time to click.

• Create accessible experiences: Make text larger, boost contrast, or improve focus states for keyboard navigation.

• Add delight: Pulse, glow, fade, or bounce your buttons to make your experience more interactive and fun.

You’ll find the Custom CSS box on your Project Settings page.
This lets you add your own CSS rules that affect buttons, overlays and other on-screen elements in your video.

Just paste your CSS in there, click Update, and preview your changes directly in your project using the preview player.

You don’t have to be a coder to style or animate your buttons. Tools like ChatGPT, Google Gemini, or your preferred AI assistant can write the CSS for you! All you need to do is describe what you want the button to do.

Tell the AI the ID of the button you want to affect (details of how to find this ID below), and what effect you’d like. It will generate ready-to-paste CSS that you can drop straight into your Custom CSS box in your Project Settings.

Prompt example to adapt:
Write CSS for Stornaway that makes the button with class .edited_choice_12345678 pulse gently, taking 2 seconds to complete a pulse and looping forever.
Use @keyframes and the animation: property so I can paste it into Stornaway’s Custom CSS box.

• The class name — .js-choice-button affects every button, or .edited_choice_xxxxxxxx will affect one specific button. It may be possible to affect everything in a specific island or variant – please ask if you need this.
• The effect — pulse, bounce, fade, glow, spin, shake, etc. You can see a list of possible CSS animations at https://animate.style/ or just ask AI.
• Whether it runs once, loops always, only happens on hover or click.

Each button in your project has its own unique data-id.
You can use that ID to target a specific button in your CSS (for example, to make just one button bigger, change its colour, or animate it). Until we provide choice IDs appearing in the Story Map sidebar, you’ll need to go through a couple of quick steps to locate it.

Here’s how to find it:

1. Open your project preview in your browser.

2. Right-click on the button you want to style.

3. Choose Inspect (or Inspect Element) to open your browser’s Developer Tools.

4. You’ll see a line of HTML like this: <button class=”btn vjs-wrp-button …” data-id=”3b92585c”>…</button>

5. Copy that data-id value (3b92585c in this example).

6. Use it in your CSS, like so:

.button[data-id="3b92585c"]{
background-color: #007bff;
font-size: 30px;
}

That’s it! Your change will only affect that specific button.

Stornaway’s custom CSS tools let you take creativity beyond simple button animations.

Style and animate titles, descriptions, text overlays, on-screen questions, and even player controls to perfectly match your brand or tone. Whether you want a smooth fade-in title, a floating text box, or a custom player controls for your interactive experience, CSS gives you full control to fine-tune every visual detail.

It’s a powerful way to make your projects feel truly bespoke, without touching your video files.

With Voyager, you can also take control of when choices appear on screen, perfect for pacing your story, adding suspense, or timing actions to your embedded content. By using a small snippet of custom CSS, like the example below, you can delay the visibility of a button so it only appears after a set number of seconds:

.button[data-id="enter-your-button-data-id-here"]{
visibility: hidden;
pointer-events: none;
animation: showBtn 0s forwards;
animation-delay: 10s; /* wait 10 seconds or change to however long you need */ }
@keyframes showBtn {
to {
visibility: visible;
pointer-events: auto;
}
}

“Pressable” Depth Effect

👉 Gives satisfying click feedback that feels like a physical button.

Glow or Outline Emphasis

👉 Make it stand out visually without movement. Great for interactive/gamified experiences.

Pulse or Glow

👉 Draw attention without being too aggressive. Great for a “next” or “continue” button.