Zingtree makes it easy to create custom-colored buttons, that can also use stock icons.

Overview

Customizing button styles is done by prefixing the button text with special classes. To choose a color, use one of these prefixes:

• .btn-orange
• .btn-red
• .btn-green
• .btn-blue
• .btn-yellow
• .btn-sky
• .btn-purple
• .btn-pink

Here's how to customize a button color

1. From the editor, open the tree and node that you want to add custom buttons to.
2. Under Question and Action Buttons click Add Action Button.
3. Edit the button text, and prefix it with one of the color options above.  For example, to make a red button that says "Stop", enter this:

    .btn-red Stop

   

Adding Icons to Buttons

In addition to colors, we've provided some icon styles you can easily add:

• .btn-yes
• .btn-no
• .btn-careful
• .btn-caret
• .btn-arrow
• .btn-thumbs-up
• .btn-thumbs-down
• .btn-information
• .btn-question

You can also combine colors and icons together. So entering this makes a green yes button. 

.btn-yes.btn-green

• Customizing Zingtrees with Themes and Custom CSS