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

30 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.

  5. Pete

    Hi Dave. How do we change the colour of the “see more” of courses in the course grid. Also, the ribbon on top of the course squares in the course grid?

    Appreciate the help where possible!

    • Pete — Please see Meredith’s code below. She has provided the CSS for the course grid buttons, as well as the enrolled ribbons. Each different type of ribbon requires slightly different CSS, so you’ll need to be more specific with which types of ribbons you want to change the color for. If you can provide a link to your course grid, I can help you with the CSS.

    • Peter

      Hi Dave. Sorry for the late reply. The ribbons in referring to are all of the ones in the course grid. Whether they are “enrolled” or “new course” etc. I would like them to all show as a uniform color (in our case, a type of green).

      One other question I had is, is there a shortcode available to narrow course grid displays by category? I mean, if you assign categories to each course (let’s say, “marketing” or “IT”) can you show them in different areas depending on their grouping of category? Hope this makes sense.

      Thank you very much in advance.

      Ps. Our network is an intranet setup and it is difficult to get access organized. But I will do so if possible. Appreciate all your help.

  6. I am trying to customize my course grid button color and color behind the ‘Enrolled’ Text when looking at the course grid. I had it working, but then Activated the Design Upgrade for LearnDash (Free Version) I liked how this updated everything except my course grid. My grid use to have blue background color and transparent background on the ‘Enrolled’ Text. Now both backgrounds are a green color that is not in my theme (Harmony) anywhere. Overall I really like the Design Upgrade Plugin, but can you please help me figure out how to update the CSS to change my button colors and background colors? Do I have to pay just to alter the button color? Thank you so much! Newbie here and googling CSS updates for LearnDash button colors hasn’t helped much!

    • Hey – Been playing around – I finally got my button colors how I want them with the following CSS:
      .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{
      color: white;
      background: #8DB9DA;
      }

      However, the ‘Enrolled’ above the featured Image in the course grid is still the wrong font color has has a green background. Can you direct me to the proper .ld_course_grid item where I would customize that? Also – how do I customize the font size on the Course Name in the Course Grid? Thank you again!

    • Hi Dave – I apologize for all the comments. I finally found all the documentation I think I need to get my course grid to look how I would like in the CSS file. I wanted my ‘Enrolled’ Ribbon and background custom colors and my ‘See More’ Button with custom color and background. I also need to get my font size and color changed for the Course Title in the Course Grid. I believe I have the CSS right, as my ribbon and button is correct, and my Course Title is Left Aligned, but it will NOT change the color or font size with this CSS. Any suggestions. Putting CSS here for those that happen upon this post!

      .ld_course_grid .thumbnail .caption .entry-title {
      font-size: 2px;
      text-align: left;
      color: #8DB9DA;
      }
      body .ld-course-list-items .ld_course_grid .thumbnail.course .ld_course_grid_price.ribbon-enrolled {
      color: white;
      background: #8DB9DA;
      }
      .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{
      color: white;
      background: #8DB9DA;
      }

    • You probably just have some theme styles that are more specific than the CSS you’ve written. Can you post a link to the page with your grid? I can send you updated CSS that will work.

    • Meredith

      Thanks Dave! I did some more code digging! I forgot I had put a font size for the Title in the course Grid in my master CSS style sheet awhile ago. I was trying to update the CSS in just my page, so the master was overriding it. I took that out and was good to go! I appreciate the quick response! Hopefully I helped others with these questions!

  7. Nima

    Dave, I worked out both of the above. I saw a post of yours that deals with categories in course grid.

    However, I cannot seem to work out with Meredith’s code for custom styles on course grid. It doesnt seem to reflect any changes for me. Any ideas?

    • Pete Nima

      Sorry, My name is Peter but my last name is Nima. Sorry for the confusion 🙂

    • Peter — Some themes output slightly different class/ID names for the course grid, so it’s possible you need slightly different code. I would need a link to your course grid page in order to confirm this. Please post a link to your page and I’ll take a look.

    • Peter

      Hi Dave,

      The styles were working fine until I installed DU plugin. Now this css doesn’t seem to function and is being overridden by DU settings. When I disable DU all works ok for custom button colors using the above css.

      Does that seem about right? I can’t get you access at this stage as the site is still on our servers.

    • Peter — Yes, that makes sense. The styles I use for the Design Upgrade plugin are pretty specific so they will override the styles in this post.

      The Pro version of Design Upgrade will win out over everything, so if you’re interested in some of its other features, that is one way to go.

      But if you just want button colors, you can add an !important after the CSS declaration. That will make your custom CSS take precedence over the Design Upgrade plugin. For example, the line that has color: #000; would look like this instead: color: #000 !important;.

  8. Peter

    Thank you so much, Dave. This worked an absolute treat!!

    We are still in the testing phase for our LmS site, I have already put in a budget request for buying the pro version.

    In the meantime, and to get the right output for presentation purposes, is there a way to add a hover syntax to this string?

    • I’m not sure exactly what code you’re using. If it’s just for the course grid buttons, or all buttons. If you paste the full code that you’re using here, I can help you with the hover style for it.

  9. Peter

    We’re using the primary and non primary code you’ve listed in the above article. Just with 006f66 as color. Not sure you wanted me to post that all in here 🙂

    • Gotcha. The hover styles are already in there. But you can pull them out and change their color, if you’d like.

      There are 4 general “states” that an element can be in.

      The normal state, which is when you first view it.

      .somebutton

      The hover state, when the mouse hovers over it.

      .somebutton:hover

      The active state, when the mouse is actively being pressed down on it.

      .somebutton:active

      And the focus state, when the keyboard focus is on it.

      .somebutton:focus

      There are different theories on whether or not to use different styles for each state, but to keep things simple, you can use the same style for hover, active & focus. Just pull out all the lines that contain :hover, :active and :focus at the end, and put them into their own declaration. And change the colors.

      Here’s an example:

      .somebutton {
      	color: #fff;
      }
      .somebutton:hover,
      .somebutton:active,
      .somebutton:focus {
      	color: #000;
      }
  10. Hi Dave,
    Is there a was to change where the default quiz button links to? At the end of my quiz there is an automatic “Click Here to Continue” button but when pressed, it just re-starts the quiz. What I want it to do is to close the page in the browser (since the quiz is a new page in the browser and by closing, the person will see the original course page). I would either like to delete this button altogether or change what it does.
    Thanks,
    Sarah

    • Hi Sarah — There are a few filters on the LearnDash support site that you can probably use to adjust where students are directed to after completing a quiz. And there are some you can use for overall completion of a course (which could be helpful if your quiz is the final step in the course).

      I don’t have the bandwidth to test them out and/or provide examples, but any developer familiar with LearnDash should know how to use them. You can search for a qualified LearnDash developer on Codeable.

      If you want to just hide the button with CSS, you can use the following:

      .learndash .quiz_continue_link {
          display: none !important;
      }
  11. josie

    Hi Dave! I’m trying to change the text on the ‘take this course button’ to purchase now, are you able to help!?

    Thanks!

    • Yep 🙂.

      Navigate to LearnDash LMS > Settings. Then click on “Custom Labels.” Scroll down a bit until you see “Take this Course (Button).” Enter “Purchase Now.” Click the “Save” button.

  12. Josie

    Awesome! I thought I would need code, I should have looked harder! thanks for your help 😃

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén