I have been looking everywhere how to accomplish this with no success.

My goal is to customize the next button ONLY ON the last page. I want to change it so that instead of saying "Next", it says "SUBMIT".

My approach was to render the original button invisible (visibility: hidden), and use :after to customize it. I did it in this way because changing the properties of the button directly achieves nothing.

The problem is the following: in Chrome, the original next button is not showed and only the customized one. The button is fully functional. However, in Safari (and presumably Firefox) the customized button is not clickable. Perhaps this is a bug as reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=1306313

However, I would like to implement a solution that is functional across browsers. Any suggestions? The code snipped is below.

<style>
    /* This snippet is included only in the last page */
    .otree-btn-next{
        visibility: hidden;
    }
    .otree-btn-next:after{
        content: "SUBMIT";
        visibility: visible;

    }
</style>

In your template code, replace {{ next_button }} with <button>Submit</button>.

Thank you Chris! That works.

As a reference for everyone else: 
If you would like to add further customization, the css won't work (for whatever reason). You have to add all further customization within the HTML. For example,
    <button style="
                    color: #fff;
                    background-color: #b08600;
                    border: 1px solid transparent;
                    font-size: 1rem;
                    border-radius: 0.25rem;">
    
        SUBMIT
    </button>

Even better, use the relevant Bootstrap classes:

<button class="btn btn-primary">SUBMIT</button>

See https://getbootstrap.com/docs/5.0/components/buttons/.