LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Customize LearnDash Button Styles with CSS (Class/ID Names)

If you’re using LearnDash for your LMS, you probably know that there are buttons that perform all kinds of different functions. From navigation and payment to quiz actions, completing tasks & downloading certificates. Buttons galore!

By default, not every LearnDash button looks the same. When I built Design Upgrade for LearnDash, I went through every line of CSS to find every LearnDash button style, and I’ve compiled them all for you right here, in one convenient place.

If you’re looking to change any LearnDash button style, chances are you’ll find it here.

LearnDash Button Types

Because I didn’t want to have 10+ buttons all looking different from each other, I decided to split them up into two groups:

  • Standard Buttons – all buttons that do not indicate a primary or important action to be taken
  • Primary Buttons – all buttons that do indicate a primary action

Most, but not all, of the class & ID names you’ll see below give you an idea what the buttons are used for. Some are a little more vague.

If you’re feeling extra spicy, feel free to break out each button and style it differently. But please be careful. Having a bunch of different styles ruins consistency… and users love consistent, predictable patterns. Be nice to your users 🙂.

Button States

You can separate out all the :hover, :active & :focus styles, if you’d like to use a hover effect. For simplicity’s sake, I kept them all together.

And obviously, please change the colors & experiment with whatever button styles match your theme.

Where to Put the CSS

The following CSS code should go in one of two places:

  1. If you’re using a child theme, or know how to create one, place this code in the style.css file of your child theme. (recommended)
  2. If not, navigate to Appearance > Customize > Additional CSS, and place the following code in there.

LearnDash Standard Button Styles

These are buttons used for navigation (previous/next lesson, etc.), returning to a page, general quiz buttons, and anything else that indicates a non-primary action.

.learndash #learndash_next_prev_link a.next-link,
.learndash #learndash_next_prev_link a.prev-link,
.learndash #learndash_next_prev_link a.next-link:hover,
.learndash #learndash_next_prev_link a.prev-link:hover,
.learndash #learndash_next_prev_link a.next-link:active,
.learndash #learndash_next_prev_link a.prev-link:active,
.learndash #learndash_next_prev_link a.next-link:focus,
.learndash #learndash_next_prev_link a.prev-link:focus,
.learndash #learndash_back_to_lesson a,
.learndash #learndash_back_to_lesson a:hover,
.learndash #learndash_back_to_lesson a:active,
.learndash #learndash_back_to_lesson a:focus,
.learndash .wpProQuiz_button[name="reShowQuestion"],
.learndash .wpProQuiz_button[name="reShowQuestion"]:hover,
.learndash .wpProQuiz_button[name="reShowQuestion"]:active,
.learndash .wpProQuiz_button[name="reShowQuestion"]:focus,
div.wpProQuiz_quiz .wpProQuiz_button,
div.wpProQuiz_quiz .wpProQuiz_button:hover,
div.wpProQuiz_quiz .wpProQuiz_button:focus,
div.wpProQuiz_quiz .wpProQuiz_button:active,
div.wpProQuiz_content .wpProQuiz_button2,
div.wpProQuiz_content .wpProQuiz_button2:hover,
div.wpProQuiz_content .wpProQuiz_button2:active,
div.wpProQuiz_content .wpProQuiz_button2:focus {
	background: #000;
	color: #fff;
	border: 2px solid #000;
}

LearnDash Primary Button Styles

These includes buttons for marking items complete, joining things, making payments, downloading things and other primary actions.

.learndash .learndash_join_button .btn-join,
.learndash .learndash_join_button #btn-join,
.learndash .learndash_join_button .btn-join:hover,
.learndash .learndash_join_button #btn-join:hover,
.learndash .learndash_join_button .btn-join:active,
.learndash .learndash_join_button #btn-join:active,
.learndash .learndash_join_button .btn-join:focus,
.learndash .learndash_join_button #btn-join:focus,
.learndash_checkout_buttons input.btn-join[type="button"],
.learndash_checkout_button input[type="submit"],
.learndash_checkout_buttons input.btn-join[type="button"]:hover,
.learndash_checkout_button input[type="submit"]:hover,
.learndash_checkout_buttons input.btn-join[type="button"]:active,
.learndash_checkout_button input[type="submit"]:active,
.learndash_checkout_buttons input.btn-join[type="button"]:focus,
.learndash_checkout_button input[type="submit"]:focus,
#sfwd-mark-complete #learndash_mark_complete_button,
#sfwd-mark-complete #learndash_mark_complete_button:hover,
#sfwd-mark-complete #learndash_mark_complete_button:active,
#sfwd-mark-complete #learndash_mark_complete_button:focus,
.learndash .wpProQuiz_button,
.learndash .wpProQuiz_button:hover,
.learndash .wpProQuiz_button:active,
.learndash .wpProQuiz_button:focus,
form#sfwd-mark-complete input#learndash_mark_complete_button[disabled],
.ld_course_grid .thumbnail.course a.btn-primary,
.ld_course_grid .thumbnail.course a.btn-primary:hover,
.ld_course_grid .thumbnail.course a.btn-primary:active,
.ld_course_grid .thumbnail.course a.btn-primary:focus,
.learndash .learndash_course_certificate .btn-blue,
.learndash .learndash_course_certificate .btn-blue:visited,
.learndash .learndash_course_certificate .btn-blue:hover,
.learndash .learndash_course_certificate .btn-blue:active,
.learndash .learndash_course_certificate .btn-blue:focus,
.learndash .quiz_continue_link a#quiz_continue_link,
.learndash .quiz_continue_link a#quiz_continue_link:hover,
.learndash .quiz_continue_link a#quiz_continue_link:active,
.learndash .quiz_continue_link a#quiz_continue_link:focus,
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"],
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"]:hover,
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"]:active,
.learndash .wpProQuiz_content .wpProQuiz_button[name="restartQuiz"]:focus,
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"],
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"]:hover,
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"]:active,
.learndash .wpProQuiz_content .wpProQuiz_button[name="next"]:focus {
	background: #000;
	color: #fff;
	border: 2px solid #000;
}

If you have any questions about LearnDash button styles, please let me know in the comments. I’m happy to try and help out wherever I can.

If you’re looking for an even easier way to customize LearnDash elements, check out Design Upgrade Pro. 80+ customizable elements with no coding required.

Previous

Hide the Comment Form on LearnDash Courses, Lessons, Topics, Quizzes & Essays

Next

Explaining LearnDash Course Types: When & Why to Use Each One

8 Comments

  1. Hello, i m trying to customize the learn-dash quiz page, questions and options.
    I want to increase the font size and color of my questions and also want to increase the font size of given options, but i don’t know css
    although i use google search for my css custamization but this time i can’t be able to solve the problem.
    I specially purchase the learndash plugin for only quizzes on my site, can you please provide me the css code to increase font size and color of my questions and question options (Radio button text).
    I will be very thankful to you for this.

    • Prajwal — If you purchased our Design Upgrade Pro for LearnDash plugin, please send an email to [email protected] with a link to a quiz page that we can access (might need to create a login & give us access to the course/quiz). Also include the email you used to purchase the plugin. I’m not seeing the email you submitted here in our system.

      Thanks.

  2. Is it possible to use CSS to right justify the buttons? (namely the button that says: Take This Course)

    • Hey Brent. It sure is! Add this CSS to your child theme’s style.css file, or the Additional CSS area of the Customizer.

      .learndash .learndash_join_button {
      	text-align: right;
      }
  3. Kakybat

    How to remove(or change) the right arrow and left the arrow?
    (next lesson, next topic, back to lesson … )

    • Add this CSS to your child theme’s style.css file, or the “Additional CSS” area of the Customizer.

      .ld-icon-arrow-left,
      .ld-icon-arrow-right {
          display: none;
      }
  4. Hi I’m wondering if there’s a way to remove the secondary navigation heading from LearnDash quizzes. A secondary heading with the exact same text appears under the main heading and makes the page look clunky.

    We had a similar issue with our page posts and products so the theme developers sent CSS code to fix the issue (see below), but it’s still appearing on our quizzes. Any thoughts?

    .single-post h2.entry_title {
    display: none !important;
    }

    • You can remove it with the Quiz settings. Go to edit your quiz. Click the “Settings” tab at the top. Scroll down and uncheck the option for “Quiz Title.” See this screenshot.

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén