CSS to style custom buttons

Here is how you can create two custom buttons with different styling: 


15445dc95cf276cfd110464caa720f0a.png

This was created by adding two button components in a row in our WYSIWYG. To achieve this, you'll want to use the right-aligned (+) icon in any row, rather than the central one...

2e23b816758ec2fb3f196214262b759d.png

Each button can be programmed to direct the flow in a different way in its options...

658b043344a4ab47c3e7b34c92fa985d.png

Unfortunately, to achieve separate colors, you'll need to add an HTML component with a bit of CSS...

6bdf26d0e8ce7233319b5956d011d876.png

Here's that 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>

Still need help? Contact Us Contact Us