How do I customise the course 'complete & continue' button text?

Hi brains trust, can anyone help me with some code to customise the 'complete & continue' button at the bottom of every course topic page?

I want it to read 'Next Topic' instead.

The site is a sandbox site here: https://beagle-asparagus-zsk4.squarespace.com/next-gen/workshop-1-why-leadership-ekrmy

Password: Callan

For background, I've made a fairly clumsy work around so that my client can track who has completed each lesson/ topic. 

There is a form on the age that asks users to complete the topic by submitting a form, and completions can be found in the contacts section under form submitters and filtered by each form. Hopefully this is just a short term fix until I work out something better or Squarespaces allows admins to track participant progress. 

In a twist to this, somehow the button has changed to read Next Lesson. I have no idea how that happened. Don't think it was anything I did. Can anyone explain this?

Try this code to Website > Website Tools > Custom CSS

span.course-item__next-lesson-text.course-item__next-lesson-text--incomplete {
    font-size: 0;
}
span.course-item__next-lesson-text.course-item__next-lesson-text--incomplete:before {
    content: "Next Course";
    font-size: 18px;
}

Quote

span.course-item__next-lesson-text.course-item__next-lesson-text--incomplete {
    font-size: 0;
}
span.course-item__next-lesson-text.course-item__next-lesson-text--incomplete:before {
    content: "Next Course";
    font-size: 18px;
}

This one worked for me, thank you so much. 
But how do I make it Course-specific? 
For some courses - one thing, for others (another language) - the other option

On 8/5/2024 at 3:36 PM, bevikulika said:

This one worked for me, thank you so much. 
But how do I make it Course-specific? 
For some courses - one thing, for others (another language) - the other option

 

You can use this code to Specific course page header injection

<style>
  span.course-item__next-lesson-text.course-item__next-lesson-text--incomplete {
    font-size: 0;
}
span.course-item__next-lesson-text.course-item__next-lesson-text--incomplete:before {
    content: "Next Course";
    font-size: 18px;
}
</style>