How to Add Gradient Backgrounds to Buttons in Forms, Surveys, and Quizzes

About Gradient Button Backgrounds

Gradient backgrounds allow you to style buttons with a blend of multiple colors, creating a more modern and visually engaging call-to-action within your CRM's Form, Survey, and Quiz builders. This feature provides enhanced design flexibility directly from the button settings, enabling you to create branded button styles without the need for custom CSS.

Setting Up a Gradient Background

Follow these steps to apply a gradient background to a button.

1. Open the Form Builder, Survey Builder, or Quiz Builder.
2. Select the button element you wish to customize.
3. Open the button's style settings.
4. Locate the Button Background section.
5. Select the Gradient option instead of Solid Color.
6. Choose your desired gradient type (e.g., Linear, Radial, Angular).
7. Add or edit the color stops to define the colors in your gradient.
8. If the chosen gradient type supports it, adjust the gradient angle to change the direction of the color blend.
9. Preview your form, survey, or quiz to confirm the button's appearance.
10. Save or publish your changes.

Gradient Background Options

Background Type

You can choose between two background types for a button:

• Solid Color: A single, flat color.
• Gradient: A blend of two or more colors.

Gradient Types

The available gradient types determine how the colors are blended across the button:

• Linear Gradient: Colors blend in a straight line.
• Radial Gradient: Colors blend outward from a central point.
• Angular Gradient: Colors blend around a circular path.

Color Stops

Color stops define which colors are used in the gradient and their position in the blend. You can add multiple color stops to create smooth transitions and accurately match your brand's color palette.

Gradient Angle

For gradient types that support it, you can adjust the angle to control the direction of the color flow, such as left-to-right or top-to-bottom.

Frequently Asked Questions

Can I still use a solid color for my buttons?

Yes. The option to use a solid color background remains available alongside the new gradient option.

Do I need custom CSS to create gradient buttons?

No. The standard gradient backgrounds can be configured entirely through the built-in button settings. Custom CSS is only necessary for advanced styling not covered by these controls.

Can I use more than two colors in a gradient?

Yes. You can add multiple color stops to include several colors in your gradient.

Will this change my existing button styles?

No. All existing button styles will remain unchanged. You must manually select the gradient option for a button to apply the new styling.