Creating Multiple Button Styles with CSS

  • Have you successfully implemented CSS in Spotfire projects but find it needs to be more flexible?
  • Are you looking to do more with CSS in Spotfire?
  • Do you need multiple formats of buttons and don’t know how to modify the CSS?

In a recent post, I explained how to create a button style with CSS.  Learning this code changed how I format buttons in Spotfire.  No more formatting each and every button.  MAGIC!!! Not really, just code, but it still felt that way.  But what if you want to create more than one button style???  Well, there is technically more than one way to solve this problem.  I have chosen to use class selectors.  If you don’t know what class selectors are, hit up this W3Schools page for information.  Before I explain the solution, here is a bit of a review on creating button styles.


As discussed in the post I linked to above, you can create button styles using CSS inside the style tag.  The syntax “.sfc-action-button” is referencing the class associated with the button element.  This code will format all buttons in a given Spotfire page.  Here is an example.

Creating Multiple Button Styles

To create multiple button styles…

  1. Place the buttons inside a container of some type, such as <span>, <div>, or <p>, depending on how much space you want to take up.
  2. Create a class for each format.  This can be whatever you want it to be.  In the example shown below, I have created a format called “buttonS1” with a different background color.
    • Note:  I also created a format called “buttonS2”, but I deleted that from the <style> tag without updating the classes .  Thus, the text area uses the format for .sfc-action-button and “buttonS1”. Apologies if this is confusing.
  3. Reference both classes “.buttonS1 .sfc-action-button” and specify only what should be different.  In this case, I am only changing the background color.
    • For example, if I wanted “buttonS1” to have different dimensions, I would add in height and width attributes.



Key Requirements to Make this Work

  1. Each button needs to be part of a container (<div>, <p>, <span>).
    • <p> means they will all be on the same line.
    • <span> will put them on different lines and not take up a lot of space.
    • <div> will put them on different lines and take up the width of the text area (probably not what you want).
  2. Create a class for each style and reference the class in the container tag.
  3. Syntax
    • Class selectors begin with a period.
    • When referencing multiple classes, separate them with a space.

Once setup, it should be easy to format going forward!


Spotfire Version

Spotfire version 7.9.1 was used to develop this content.



Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

Leave a Comment

Your email address will not be published. Required fields are marked *