Different Header Button on One Page

What does this code do?

This code snippet will allow you to change the style of the button in the header for one page only.

Option #1: Solid Color

This code will set the color of the background and font of the button. It can also be used to make the button solid instead of an outline style button. The code provided also has the button become slightly more transparent when on hover.

Copy and paste this code into Design > Custom CSS

/* Button in Header on One Page */
#COLLECTIONID .header-actions .btn {
  background: #ac7888 !important; /*background color */
  color: white !important; /* font color */
  &:hover {
    opacity: 0.8; /* opacity of button on hover */
  }
}

Then add the collection id of the page you want to change and customize the colors.

Option #2: Outline Style

This code will set the color of the background to transparent and add a border or outline. It can be used to make the button an outline style button instead of a solid color.

Copy and paste this code into Design > Custom CSS

/* Button in Header on One Page */
#COLLECTIONID .header-actions .btn {
  background: rgba(0,0,0,0) !important; /*transparent background color */
  color: white !important; /* font color */
  border: 1px solid white; /* color and thickness of the border */
  border-radius: 5px;  /* round corners; delete if you want square */
}

Then add the collection id of the page you want to change and customize the border.

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id check out our Start Here guide.

3. Then customize the colors.