Skip to main content

Buttons

The Buttons panel controls every LearnDash button in one place, so you don't have to restyle buttons on other panels. These styles only affect LearnDash buttons, such as previous/next lesson navigation, Mark Complete, and expand all. Buttons used by the third-party plugins Design Upgrade Pro supports follow these styles too.

The Buttons section of the Customizer: Button Border Radius, Primary and Standard button colors with their hover states, and the keyboard focus outline option.

Button border radius​

Button Border Radius sets the corner rounding for LearnDash buttons. Enter the value in pixels (px).

Primary button​

Primary buttons are used for primary actions such as Take this Course and Mark Complete.

Primary button​

Primary Button sets the background color of primary buttons. Leave it empty to follow the Primary Hue set in General Design.

Primary button text​

Primary Button Text sets the text color of primary buttons.

Hover: Primary button​

Hover: Primary Button sets the background color of primary buttons on hover. Leave it empty to follow the Primary Hue set in General Design.

Hover: Primary button text​

Hover: Primary Button Text sets the text color of primary buttons on hover.

Standard buttons​

Standard buttons are used for secondary actions such as next/previous navigation and expand/collapse all.

Standard button​

Standard Button sets the background color of standard buttons. Leave it empty to follow the Primary Hue set in General Design.

Standard button text​

Standard Button Text sets the text color of standard buttons.

Hover: Standard button​

Hover: Standard Button sets the background color of standard buttons on hover. Leave it empty to follow the Primary Hue set in General Design.

Hover: Standard button text​

Hover: Standard Button Text sets the text color of standard buttons on hover.

Hover styles​

The hover state triggers when a mouse hovers over a button, or when someone taps a button on a touch-enabled device.

Accessibility​

Accessibility: Keyboard focus outlines​

Keyboard Focus Outlines shows a visible focus indicator during keyboard navigation. It uses :focus-visible, so outlines don't appear on mouse clicks. This setting is on by default. Turning it off leaves keyboard users without any focus indication.

Accessibility: Focus ring color​

Focus Ring Color sets the outline drawn around buttons, links, and fields on keyboard focus. Pick a color that stands out from both the page background and your button colors. Leave it empty to follow the Primary Hue set in General Design.

Other notes​

Buttons in the LearnDash login and registration modal don't use these styles. Style those on the Login & Registration Popup section instead.

Button colors inside alert messages come from the Alerts panel.

Last updated on