Skip to main content

Qualtrics Tutorials: Next and Previous Button Colors

Change the colors and other attributes of the Next and Previous buttons on a Qualtrics survey.

Change the color of the Next and Previous buttons

As of this writing (February 2016), the Look & Feel window in Qualtrics does not include the option to modify the next and previous button colors. Users wishing to customize the appearance and mouseover effects for the next and previous buttons on a survey must use cascading style sheets (CSS).

You can access 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.

We recommend setting your survey's template 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.

To change your survey's template, open the Look & Feel window, then click on the template thumbnail image in the upper right corner, or click on the template name, which is right below the thumbnail image. The default template for all new surveys is called Qualtrics 2014; it uses a red, white, and grey color palette, and most importantly, it uses identical "bars" for multiple choice and check-all-that-apply items instead of traditional radio buttons and check boxes.

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 Customization Examples

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.

Identical previous/next buttons with fade effect on mouseover

.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;}
Color Use

#C0C0C0

button background-color

#404040

button font color

#808080

button border

#EEEEEE

mouseover background color

#7B1CDB

mouseover font color

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;}
Color Use

#002147

button background-color

#FFFFFF

button font color

#808080

left/right button border

#009DDB

mouseover background color

#FFFFFF

mouseover font color

What about other survey elements?

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;}

Common CSS Attributes for Buttons

Attribute

Description

background-color

Controls the background color of the button.

color

Controls the font color for text inside the button.

font-family

Controls the font for text inside the button (e.g. Arial, Times New Roman, etc.)

font-size

Controls the size of font for text inside the button.

text-decoration

Can be used to add underline, overline, strikethrough etc. effects to text inside the button.

text-transform

Can be used to make the text inside the button all-caps, all-undercase, etc.

padding

Controls the amount of space between the button text and the edges of the button. (Contrast with margin.)

margin

Controls the amount of space between the outside of the button and other objects on the page. (Contrast with padding.)

background-image

Controls the background image of the button. Often used to create gradient effects.

border-radius

Controls how rounded the corners of the button are. A border radius of 0px yields square corners. Larger values of border-radius create more rounded corners.

border-radius: 0px (square corners) border-radius: 0px

border-radius: 5px (slightly rounded-off corners) border-radius: 5px

border-radius: 15px (very rounded corners - button is pill-shaped) border-radius: 15px

box-shadow

Can be used to create shadow effects around the edges of the button. Shadow color, shadow direction, and shadow transparency can all be controlled with this attribute.

border

Controls the border around the button. This attribute can control the thickness, line style (e.g. solid, dashed, dotted, etc.), and color.

cursor

What the cursor should look like when over the button.

For More Information

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.