Animated gradient buttons

A FREE Carrd template of native Carrd buttons with animated gradient background colors.

• button-one

• button-two

• button-three

• button-four

• button-five

• button-six

Made by @jasonleowsg© Jason's Plugins For Carrd

• Cancel

Tutorial

How to set up the animated gradient buttons in your Carrd site

1. Add a Button element at a position of your choice in your Carrd site.2. Set background color of the Button to a single plain color, under Color > Background. Do not add a Gradient to the Button as it conflicts with the custom CSS code later on.3. Look through the collection of animated gradient buttons on the template's demo site - animatedgradientbuttons.carrd.co. If you want to use the gradient for the first button, copy the label text of the button button-one. Then go to the Button you added in Step #1, go to Settings > Classes, paste/type button-one to the Classes field. Repeat the same for other animated gradient styles of the other buttons.4. Add an Embed element below the Button element you added in Step #2. Set Style of the Embed element to Hidden, Body Top.5. Copy the custom code from the Embed element called animated gradient button style in the template you downloaded, and paste the entire code snippet into the new Embed element you added in Step #4.5. Publish, done!