CSS Snippet: Change the text of the 'Next' button

The CSS snippet below will modify the text of your survey’s “next” button. The same principle can be used to change the text of the ‘Previous’ or ‘Finish’ button.

We added some comments in the snippet that explains how to target specific survey languages in your survey.

/* Remove the current displayed text in each language */ 

button.button.ladda-button.nextButton { 

color: transparent; position: relative; 

} 

/* Display a new text on the button, the code below, targets every available language of the survey, read the info below, if you want to target a specific survey language*/ 

button.button.ladda-button.nextButton:before { 

content: 'Bevestig'; 

color: #fff; position: absolute;

 } 

/* INFO */ 

/*target text button in English - use the css selector below to target specific language, if not used, the text will be the same in each language :lang ([language code])> Depending the text that needs to be displayed, play around with the padding, to assure the text is aligned properly in the middle of the button*/ 

/*END INFO */ 



:lang(en)>button.button.ladda-button.nextButton:before { 

content: 'Confirm'; 

color: #fff; 

position: absolute;

} 



/* target button on specific survey page*/ 

/*use : .page-xx */ 

/*The example below shows you how to target the next button on page 8 of your survey. */

/*Keep in mind to update the css if pages are added in your survey (this way you can target any element on a specific page: */


.page-8 button.button.ladda-button.nextButton { 

color: transparent;

}

Live Example

Back to CSS Snippets page