More story action button styles for classic stories

Styled buttons are fun way to add flair to your story maps

Good news everyone! Updates to our classic Story Map templates in April and June 2018 have brought some popular features of Map Journal over to Map Series.

• Story actions let you add links to your story that change the content of your story; for example, change a map to show a different location, toggle layer visibility, or display a pop-up.
• The source view lets you edit the underlying HTML code of the content in the description panel and add your own custom code.

To celebrate these new features, this article shares some more fun style examples you can use to jazz up your story actions.

A recent guest post by Jennifer Bell has even more examples and tips for styling your story map to make it unique, so be sure to check that out too!

Add Interactive Buttons and Customize Map Series

If you need a tutorial on how to add the CSS for these button styles to your story you can read up on that (and find additional styles) here…

Create Buttons for Story Actions in Map Journal

UNESCO World Heritage Sites story

The buttons in this story are simple and clean and work well with the white background used in this story.

Button styles from World Heritage Sites story

And here’s the CSS…

<style>
.btn-blue {
    display: inline-block;
    position: relative;
    width: 40%;
    left: 5%;
    max-width: 49%;
    background-color: transparent;
    border: 2px solid #0077D4 !important;
    color: #0077D4 !important;
    text-transform: uppercase;
    font-size: 90%;
    padding: 5px 15px;
    text-align: center;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
   }
.btn-blue:hover {
    background-color: #0077D4;
    color: #fff !important;
   }
</style>

The Ever-Changing Minimum Wage story

Here are some other nice blue buttons from our recent story about the minimum wage.

This story uses a dark theme in the side panel, and one of the reasons these buttons add so much to the story is that it mimics the glowing blue symbols used in some of the the maps. Also, notice the transparent background color of the button is the same as the fill of the map symbols. These are the kinds of nice touches that make a story feel polished.

The buttons also have a hover effect, like the ones in the UNESCO story.

Here’s the CSS for these glowing blue buttons:

<style>
.btn-intro {
     display: inline-block;
     text-decoration: none !important;
     font-weight: normal !important;
     background-color: #0c232b;
     border: 1px solid #23647b;
     border-bottom: 2px solid #23647b !important;
     color: #00ccff !important;
     width: 100%;
     border-radius: 2px;
     padding: 5px 8px;
}
.btn-intro:hover {
     background-color: #23647b;
     border: 1px solid transparent;
     border-bottom: 2px solid transparent;
     color: #ffffff !important;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   transition: all .5s ease;
}
</style>

There’s another type of button in this story — buttons that are more like headings rather than centered discrete story elements. They have similar color, background, border, and hover effects as the buttons shown above, but the padding and margins are different.

Here’s the CSS for these smaller buttons.

<style>
.btn-body {
     display: inline-block;
     text-decoration: none;
     font-weight: normal !important;
     background-color: #0c232b;
     border: 1px solid #23647b;
     border-bottom: 2px solid #23647b !important;
     color: #00ccff !important;
     border-radius: 2px;
     padding: 1px 2px;
     margin: 2px;
}
.btn-body:hover {
     background-color: #23647b;
     border: 1px solid transparent;
     border-bottom: 2px solid transparent;
     color: #ffffff !important;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   transition: all .5s ease;
}
</style>

Finally, there are some actions that are in-line with the story narrative. They use the same color and have a hover effect but have no background.

Here’s the CSS for those:

<style>
.btn-inline {
     display: inline-block;
     text-decoration: none !important;
     font-weight: bold !important;
     background-color: transparent;
     border: 0px solid transparent;
     border-bottom: 0px solid transparent !important;
     color: #00ccff !important;
     border-radius: 2px;
     padding: 0px 0px;
     margin: 0px;
}
.btn-inline:hover {
     background-color: transparent;
     text-decoration: none !important;
     font-weight: bold !important;
     border: 0px solid transparent;
     border-bottom: 0px solid transparent;
     color: #ffffff !important;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   transition: all .5s ease;
}
</style>

Run with it!

We’d love to see the stories you create using these styles. We’d love it even more if you created your own styles and shared them here. You may need to adjust the padding and/or margin to get these buttons to be the shape/size you want for your story. Feel free to tweak the code provided in these examples to fit the needs of your story.

Intro photo by Immo Wegmann on Unsplash