Business Intelligence Tools / Developers Corner

Create a Button Style with HTML & CSS

  • Do you want your Spotfire buttons to look stylish and clean throughout the entire analysis?
  • Do you absolutely hate formatting each and every button in Spotfire?

Of course, you do! Those were trick questions.  Fortunately, Spotfire integrates with HTML and CSS, and you can use code to create a button style. Your style will be applied throughout the analysis, which means no more formatting each and every button.  Yay!!

Button Style Code

The code below came from one of my coworkers — Lucas Woods — who is a rock star with HTML and CSS.  I honestly don’t know how this guy writes and work in so many languages.  He’s fantastic, and this code made my life a lot easier.  Now, it doesn’t copy and paste very well.  I’ve tried to mimic the indentations (which isn’t required), but a screenshot is also included.  Just pop this into the Spotfire text area HTML editor.  Obviously, you’ll want to update the font, font-size, colors, and other properties for your own preferences, but it’s super simple.  Create your own style button!

Button Style

@import url(‘’);
.text {
font-family: ‘Roboto’, sans-serif;

.sfc-action-button {
color: #ffffff !important;
font-size: 14px !important;
font-family: ‘Roboto’, sans-serif !important;
padding-left: 16px !important;
padding-right: 16px !important;
height: 36px !important;
background-color: #2196F3 !important;
background-image: none !important;
border: 0px #fff solid !important;
border-radius: 2px !important;


Of course, I have to include a picture of what this code generates, so here are the buttons.


Now, I have a few warnings for those who either aren’t super familiar with HTML/CSS or are just starting to use HTML/CSS in Spotfire.

  1. In order for the <style> tag to be recognized, turn off HTML sanitation.  I wrote a blog post on how to do that. You will need admin privileges.
  2. Many people are used to right-clicking and selecting ‘Edit Text Area’.  You cannot use this option after you add the HTML.  If you do, it will wipe out the code you just added.  You will need to make any subsequent updates to the text area via the HTML editor.  This sounds horrible, but Spotfire provides all the same controls, you can use Ctrl F, and your HTML will get a lot better!

Other References

In order to create a beautiful button style, you may also want to check out….

This is only the tip of the iceberg in terms of what you can do with HTML and CSS in Spotfire text areas.  More posts forthcoming!

11 thoughts on “Create a Button Style with HTML & CSS

  1. Regina Reply

    Hello Julie:

    Fisrt of all, congratulations for your support and advices. The tricks you share are really lightening for Spotfire beginner users like me! 🙂
    Although I´ve followed the instructions you provide (I already created “go to” button, and modified text area administration manager settings) an error message shows in my HTML editor that reads: “the element is not supported”. Have you got any clue of what I´m doing wrong?

    Thanks in advance, have a great weekend!

    • Julie Schellberg of Big Mountain Analytics, LLC Post authorReply

      Thanks so much for reading! I always hope it helps someone out when I post things. I believe this is because HTML Sanitation (a preference that the administrator sets) is turned on and needs to be set to false. There is a link to a post about HTML sanitation in the caveats section of this post.

      • Regina Reply

        Thanks for your response, Julie.
        Last week I made the changes you pointed out avobe, but it didn´t work. Today I´ve tried again, and now there is and amazing purple buttom in front of me! 🙂
        What I had to do after setting the value to “false” (in the text area sanitation) was just close and start Spotfire again. Looks like it didn´t save the new settings but today it did it! 🙂

  2. Julie Schellberg Reply

    It makes sense that you would have to restart the application after changing a setting. Glad you got it working!

  3. Pingback: Unscrambling the Spotfire Text Area - Data Shop Talk

  4. Tim Reply

    Great article and thank you for sharing!

    Has anyone been able to figure out how to make a button active in Spotfire?
    I can’t seem to change the color of a button once it has been clicked. I am able to change the tag background color but it will not change the actual button color.

    Any help is appreciated!

    • Tim Reply

      I did find out how to make an active button.

      I had to write the code myself.
      If anyone is curious feel free to shoot me an email. and title it Spotfire Button so I don’t think it’s spam 🙂


  5. Pingback: Using CSS in Spotfire HTML - Part 3 - Data Shop Talk

  6. Mich Reply

    Do you have any idea how to apply the same html to an property control button?

    For action button this header is required: .sfc-action-button

    tried / but no luck. Any idea?


    • Julie Schellberg of Big Mountain Analytics, LLC Post authorReply

      I’m not following you on “property control button”? There aren’t property control buttons in Spotfire, only action controls buttons. Do you mean a button you created with HTML?

  7. Pingback: Creating Multiple Button Styles with CSS - Data Shop Talk

Leave a Reply

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