The preview area is where you will get a real-time preview of your Button as you edit it above in the customization area. On the left side of the preview area, we give you a few options that affect the display of your preview while you’re working on your Button. These options have no affect on how your Button displays to your viewers on the front of your site, they only affect the preview you’re seeing while you’re creating or editing your Button.
1. Preview background color
The first preview option is the background color, which defaults to grey. This just changes the background color of the preview area around the button. Change this if you’re creating a button with a color scheme that makes it difficult to see against the background, or if it’s easier for you to visualize your button against a different color.
The checkered background of your button when you first create it is not actually part of your button, it’s just meant to show you that your button is by default transparent, so the checkered background represents a transparent background allowing whatever is behind the button to be seen.
2. Hover state display
The second preview option affects the “hover state” display. Buttons can have different states when hovered, often called a “rollover” effect. The default preview option is to show you two copies of your button, one the non-hovered state, and one the hovered state. Alternatively, you can choose to instead show the button as it would appear to your viewers, where the hover state is only visible when your mouse is over the element. This helps you visualize the rollover effect.
3. Layer visibility
Unchecking a Button layer in this area will remove that layer from the preview but not from the button itself. This is useful for editing purposes, allowing you to more clearly see how customizations effect specific layers.