Buttons CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date feature, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize outcomes/buttons.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to outcomes rendered as buttons in a Flow running the default player.

Class/Selector	Description
.button-outcome	The main class applied to all outcome buttons in a Flow. For example, to increase the padding applied to all outcome buttons and elements in a Flow: .button-outcome {padding: 5px;}
.button	The main class applied to all buttons in a Flow. For example, to increase the font size of all buttons in a Flow: .button {font-size: large;}

Default legacy player CSS

You can use the following classes/selectors to apply additional CSS styling to outcomes/buttons in a Flow running the default legacy player.

Class/Selector	Description
.mw-bs .outcome	The main class applied to all outcomes within a Flow. For example, to increase the padding applied to all outcome buttons and elements within a Flow: .mw-bs .outcome {padding: 5px;}
.mw-bs .btn	The Bootstrap class applied to all buttons within a Flow. For example, to increase the font size of all buttons within a Flow: .mw-bs .btn {font-size: large;}
.mw-bs .btn-default .mw-bs .btn-danger .mw-bs .btn-info .mw-bs .btn-outline .mw-bs .btn-primary .mw-bs .btn-success .mw-bs .btn-warning	The Bootstrap classes applied to individual button types within a Flow. These classes map to the Appearance | What kind of action is this? setting on an outcome that allows you to define which appearance type a button should use. These can also be added to individual buttons using the classes attribute. Refer to Attributes Reference. For example, to increase the font size of all 'warning' buttons within a Flow: .mw-bs .btn-warning {font-size: large;}
.mw-bs .btn-lg .mw-bs .btn-sm .mw-bs .btn-xs	The Bootstrap classes used to apply a different size to a button. These can be added to individual buttons using the classes attribute. Refer to Attributes Reference.