How to Hide Buttons

Appcues modals and slideouts will auto-generate buttons that either move users to the next step (or complete a flow) or allow them to navigate back a step.

With a little bit of CSS, you can further customize your flows be removing buttons on a flow or step basis. Just add one of these CSS snippets in your flow's HTML editor:

Hide all buttons:

<style type="text/css">
.appcues-actions, .tooltip .panel-content-actions {
    display: none !important;
}
</style>

Hide only the back buttons:

<style type="text/css">
.appcues-button[data-step=prev] {
    display: none !important;
}
</style>
Hide only the forward buttons:
<style type="text/css">
.appcues-button-success {
    display: none !important;
}
</style>
Hide buttons only on a specific step:
<style type="text/css">
/* Replace "0" with the step whose buttons you want to hide. */
/* This value is zero-indexed, meaning "0" is the first step, "1" is the second step, etc. */
appcues.cue-step-0 cue.active .appcues-actions {
    display: none !important;
}
</style>
Hide arrows on buttons:
<style type="text/css">
.appcues-actions-right .appcues-button:after {
    display: none !important;
}
.appcues-actions-left .appcues-button:before {
    display: none !important; 
}
.appcues-button {
    padding: 0px 5px 0px 5px !important;
}
</style>

Still need help? Contact Us Contact Us