How to change the style of flow elements using CSS

On the Design tab, you can find many options to customize your lows to your liking. However, if you would like to do something that you cannot find there, you can still make extra changes by adding a CSS style tag.

To do this, first, we need to add the embedded content component to each step where we would like to make the change:

Next, we need to identify the ID or the CSS class of the elements we would like to modify. To do that, we will use the browser's inspect element feature. In most browsers, the easiest way to reach it is by right-clicking on the element, then select the "inspect" option. It will open up the inspector, and if we hover over the element, it will tell us the information we need.

If we choose the CSS class, all elements with that class will be modified. However, by choosing the ID, an individual element can be changed as well.

In this example, I am searching for the CSS class of this submit button. It is written in blue: 

CSS class:

button.primary.submit

Now, we can go back to the embedded component and add and create the style tag. The actual code will depend on the modifications we are making to the element, and they can vary from a simple color gradient to advance styling.

The code:

<style>
{{Selector (CSS Class)}} {
PROPERTY: VALUE;
}
</style>

In this example, I will change the color of the button to a pink-purple gradient. I also remove the border to make it look better: 

The code:

<style>
button.primary.submit {
  background: linear-gradient(142deg, rgba(240,90,157,1) 0%, rgba(77,0,138,1) 100%);
  border: none;
}
</style>

And this is what it looks like:

You can modify any element the same way.

Don't worry, if you make a mistake! You can always remove the embedded content component and everything will return to normal.