CSS to style custom buttons

You can add your own customizable buttons in your Modals and Slideouts. By default, these buttons will adopt the styles set in the theme. To change the button background color and button font color, you can edit your Theme's colors or use this article to create custom buttons with different styling as you see below!

15445dc95cf276cfd110464caa720f0a.png


To have two different button colors on the same modal (pictured above):

  1. Click the add "+" button on the right and go to Advanced and choose Button to add the custom buttons within the same row. Here is our help doc with more info about creating custom buttons.  
  2. After the buttons have been configured, on the same line as the recently added buttons, click the + button, go to Advanced and choose HTML 

  3. Enter the HTML code to change the color and save the changes.
    6bdf26d0e8ce7233319b5956d011d876.pngHere's the needed CSS in plaintext... 

    <style>   .zone-container:nth-of-type(1) a.appcues-button {     background-color: gray !important;   }   .zone-container:nth-of-type(2) a.appcues-button {     background-color: blue !important;   } </style>
    	

    Please note: you can use "blue" or "0000FF" when changing the colors in the code above.