# Customize a Flow’s User Interface

After you’ve embedded a flow in a Visualforce page, you can customize what the flow looks like at run time by applying custom styles using CSS. Using a combination of flow attributes and CSS classes, you can customize the individual parts of a flow, such as the button location, button style, background, and the look and feel of the screen labels.

## Flow Button Attributes

Use these attributes to change how the **Next**, **Previous**, **Finish**, **Pause**, and **Don’t Pause** buttons appear in your flow.

| Attribute        | Description                                                                                                                   |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `buttonLocation` | Defines the location of the navigation buttons in the flow’s user interface. Available values are:`top`, `bottom`, or `both`. |
| `buttonStyle`    | Assigns a style to the flow navigation buttons as a set. Can only be used for inline styling, not for CSS classes.            |

Example `buttonLocation`:

```visualforce
<apex:page>
<flow:interview name="MyFlow" buttonLocation="bottom"/>
</apex:page>
```

**Note:** If unspecified, the `buttonLocation` value defaults to `both`.

Example `buttonStyle`:

```visualforce
<apex:page>
  <flow:interview name="MyFlow" buttonStyle="color:#050; background-color:#fed; border:1px solid;"/> 
</apex:page>
```

## Flow-Specific CSS Classes

You can override these predefined flow style classes with your own CSS styles.

| Flow Style Class  | Applies to...                                                                 |
| ----------------- | ----------------------------------------------------------------------------- |
| FlowContainer     | The `<div>` element containing the flow.                                      |
| FlowPageBlockBtns | The `<apex:pageBlockButtons>` element containing the flow navigation buttons. |
| FlowCancelBtn     | The **Don’t Pause** button.                                                   |
| FlowPauseBtn      | The **Pause** button.                                                         |
| FlowPreviousBtn   | The **Previous** button.                                                      |
| FlowNextBtn       | The **Next** button.                                                          |
| FlowFinishBtn     | The **Finish** button.                                                        |
| FlowText          | A text field label.                                                           |
| FlowTextArea      | A text area field label.                                                      |
| FlowNumber        | A number field label.                                                         |
| FlowDate          | A date field label.                                                           |
| FlowCurrency      | A currency field label.                                                       |
| FlowPassword      | A password field label.                                                       |
| FlowRadio         | A radio button field label.                                                   |
| FlowDropdown      | A picklist label.                                                             |

**Note:** To prevent your CSS styling for flow navigation buttons from being overwritten by button styling applied elsewhere in the system, we recommend you specify this flow style class each time you apply CSS styling to flow navigation buttons. For example, instead of `.FlowPreviousBtn {}`, enter `.FlowPageBlockBtns .FlowPreviousBtn {}`.

**See Also**

- [Embed Flows in Visualforce Pages](/docs/platform/salesforce-pages-developers-guide/guide/pages-flows-adding.md)
- [Using Custom Styles](/docs/platform/salesforce-pages-developers-guide/guide/pages-styling-custom.md)