Buttons CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, 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. See 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. See Attributes Reference.