Custom Buttons: Colors and Icons

  • Updated

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.2022-04-26_14-14-22.png
  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
    2022-04-26_14-16-28.png

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

2022-04-26_14-19-05.png

 

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Didn't find what you need?

Our friendly customer support team is here to help

Submit a Ticket

Looking for help or advice?

Reach out to our knowledgeable community of users.

Zingtree Community