Qualtrics Tutorials: Next and Previous Button Colors (Old Look & Feel)

This tutorial includes several references to the old Look & Feel editor in Qualtrics. While this editor still exists (as of June 2021), the new Look & Feel editor makes it possible to do many of the customizations without writing CSS code. For instructions on how to use the new Look & Feel editor, check out the Kent State Look & Feel for Qualtrics Surveys tutorial.

Prior to 2017, the old the Look & Feel editor in Qualtrics did not include settings to modify the next and previous button colors. Users wishing to customize the appearance and mouseover effects of the older templates must use cascading style sheets (CSS).

When using the old Look & Feel editor, you can edit your survey's CSS by going to Look & Feel > Advanced and clicking Add Custom CSS. This will open an editor window where CSS code can be entered.

If you are using the older templates, we recommend setting your survey's template to Minimal 2014 before creating new, custom CSS for your survey. The Minimal 2014 template is responsive (meaning that it will display well on different devices and screen widths) and uses traditional radio buttons and checkboxes for multiple choice items. It has a neutral color palette with little ornamentation, which makes it easy to customize with your brand colors, and reduces the amount of preset styling you will need to manually override.

In the old Look & Feel editor, you can change the survey's template by clicking the template thumbnail image or clicking the template's name below the thumbnail image.

Minimal 2014 template

Multiple choice, single answer

Multiple choice, multiple answer (check-all-that-apply)

Qualtrics 2014 template

Multiple choice, single answer

Multiple choice, multiple answer (check-all-that-apply)

Changing the button colors

To change the background color of your survey's buttons, add the following snippet of CSS to the editor window (replacing your-color-here with a hex or RGB color code):

#Buttons #NextButton, 
#Buttons #PreviousButton{
    background-color: your-color-here;} 

Note that if you click Cancel in either the CSS Editor or the Look & Feel window, any changes you have made to the survey’s appearance will be lost.

When you have finished editing, click Save in the CSS Editor window. Your survey’s appearance should automatically update in the Look & Feel window. If you need to make any additional changes, click the Add Custom CSS button to go back to the CSS Editor window. Make sure to also click Save in the Look & Feel window to save all of your changes to the survey appearance.

This should work with most of the built-in Qualtrics templates. However, if you are using a built-in template that has specific styling you do not like, you will need to code out the unwanted styles via your own CSS code. Many of the built-in Qualtrics templates have buttons with effects like shadows, borders, padding, etc. You will need to find the corresponding CSS attributes that control those features and turn them off.

Different looks for each button

Notice how the above code has two components being customized: #Buttons #NextButton and #Buttons #PreviousButton, which are separated by commas. This syntax makes both buttons have identical appearances. If you want the buttons to have different appearances, you’ll need to modify the code so that each element is being stylized separately. The general code to do this is:

.Skin #Buttons #NextButton, 
.Skin #Buttons #PreviousButton{
   shared attributes here;}

.Skin #Buttons #NextButton{
   next button only attributes here;}

.Skin #Buttons #PreviousButton{
   previous button only attributes here;}

To implement the above code:

1. Open your Qualtrics survey and click Look & Feel > Advanced. Click Add Custom CSS. This will open a CSS text editor window.
2. If the buttons will have any shared styling, place the coding for the shared attributes in the #Buttons #NextButton, #Buttons #PreviousButton block.
3. Styling that should apply only to the next button should go in the #Buttons #NextButton block.
4. Styling that should apply only to the previous button should go in the #Buttons #PreviousButton block.

Note that it is bad programming practice to independently set the appearances of elements that are intended to share attributes. This is because if you ever want to change the appearance of the buttons in the future, you will need to make identical modifications in more than one place, which is more error-prone and time-consuming.

Change alignment of the Previous button

In some templates, the previous and next buttons are on opposite sides of the page, but in other templates, they’re both next to each other on the right side of the page.

To have the previous button aligned to the left side of the page, use “float: left” when setting the styling for the previous button:

.Skin #Buttons #PreviousButton{float: left;}

You do not need to do anything to the next button; by default, it is aligned to the right side of the page.

Change the button appearance on mouseover

Mouseover effects can be set for many types of elements by adding “:hover” after the element, class, or ID name.

.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover {
    mouseover attributes here;}

You’ll want to be careful with this if you’ve set a custom appearance for the non-hover version of the buttons. For example, if you customize #Buttons #NextButton to have rounded corners, you’ll need to also specify that the hover version should also have the same size rounded corners – otherwise, you may end up with unintended effects (such as the corners of the box switching from square to rounded). This is as simple as adding #Buttons #NextButton:hover, #Buttons #PreviousButton:hover to the comma-separated list where you set the styling for the next and previous buttons.

.Skin Buttons #NextButton, 
.Skin #Buttons #PreviousButton, 
.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover{
   shared attributes here;}

.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover{
   mouseover effects here;}

Button color changing on mouseover

In this example:

• The previous and next buttons have an identical appearance: 
  • Mid-grey background
  • Dark grey font color; 16px Arial font
  • Dark grey border
  • Square corners
  • No shadow effect
• On mouseover, the font color and background color fade to purple and light grey, respectively.
• When the cursor moves off the button, the background and font color fade back to their original state.

Note that in order for the color change to fade in and out at the same rate, the code controlling the transition type and speed must be included in the definition for the starting state of the buttons. If the transition code is included in the definition for the hover effects (and not in the base state), the transition effects will only apply on mouseover; when the cursor is removed from the button, the changes will happen instantaneously.

.Skin #Buttons #NextButton, 
.Skin #Buttons #PreviousButton, 
.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover{
   background-color: #C0C0C0;
   color: #404040;
   border: 1px solid #808080;
   box-shadow: none;
   border-radius: 0px;
   padding: 10px;
   margin: 10px;
   font-family: Arial;
   font-size: 16px;
   transition: all 0.5s ease 0s;}

.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover{
   background-color: #eeeeee;
   color: #7B1CDB;}

Different previous and next buttons

In this example:

• The previous and next buttons have the same background color, font color, shape, etc.
• The all-over button border is removed for both the previous and next buttons.
• The previous button has a thick grey border on the right side.
• The next button has a thick grey border on the left side.
• On mouseover, both the previous and next buttons change to a bright blue.

.Skin #Buttons #NextButton, 
.Skin #Buttons #PreviousButton, 
.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover{
   background-color: #002147;
   color: #ffffff;
   border: 0px solid;
   box-shadow: none;
   border-radius: 4px;
   padding: 10px;
   margin: 10px;
   font-family: Arial;
   font-size: 16px;}

.Skin #Buttons #NextButton, 
.Skin #Buttons #NextButton:hover{
   border-left: 7px solid #808080;}

.Skin #Buttons #PreviousButton, 
.Skin #Buttons #PreviousButton:hover{
   border-right: 7px solid #808080;}

.Skin #Buttons #NextButton:hover, 
.Skin #Buttons #PreviousButton:hover{
   background-color: #009DDB;
   color: #ffffff;}

Radio button/checkbox fill colors

Changing the colors for the interactive components of survey items (such as radio buttons, checkbox fills, and icon colors for slider and ranking items) is slightly more complex than changing button colors, because there are multiple classes that may contribute to the appearance of a particular item type. Additionally, those classes may affect more than just the item type of interest, and it is possible to inadvertently affect the appearance of other item types that you did not originally intend to affect.

We have provided a block of CSS code adapted from Qualtrics's "Boxed Questions" and "Minimal 2014" template that changes the colors for survey items. You are welcome to use this code chunk as a starting point for customizing your own surveys. This code has only been tested and currently will only work as intended if you use the Boxed Questions or Minimal 2014 templates as a base.

Qualtrics logo header (older templates)

• Hide the Qualtrics logo graphic: html .Skin #Logo{display: none;}

Survey progress bar

• Change the filling inside the bar: .Skin .ProgressBarFill{…;}
• Change the border around the bar: .Skin .ProgressBarFillContainer{…;}
• Change the font style for the progress bar area: .Skin .ProgressBarContainer{…;}
• Change the label for the progress bar (by default, the label says “Survey Completion”): .Skin .ProgressBarContainer label{…;}

Example 1: Uppercase text labels for progress bar

.Skin .ProgressBarContainer label{text-transform: uppercase;}

Example 2: Uppercase text labels, alternate color fill, and no border for progress bar

.Skin .ProgressBarFill{
    background: none repeat scroll 0% 0% #009ddb; height: 10pt;}

.Skin .ProgressBarContainer label{
    text-transform: uppercase;}

.Skin .ProgressBarFillContainer{
    width: 100px;
    border: none;}

In this tutorial, we show some shortcuts that can be used to modify button appearance. If you want to master customizing the appearance of your surveys, you'll need to gain a better understanding of how CSS works, and what classes Qualtrics has defined for their survey appearance.