Save Search Button

One of the front-end features is the ability for a lead to save a search and therefore, subscribe to receive email updates on properties that fit the criteria for the search.

On the main search page, you will find a Save Search button, which populates on the right of the search bar, after criteria has been added to the search (like a location or a price range).

Customization Options

• The default background color is the blue, shown in the image above, but you can change the background color of the button to whatever you'd like.
  
  Here is an example making the background color dark gray:

  

  *To change the background color of Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  background-color: #hexcode !important;
  }
  
  

• The button by default has a 1px border set, however, this can be changed. You can make a border look many different ways. At Showcase IDX we like to use '1px solid' to define a border on buttons. '1px' sets the thickness of the border and 'solid' defines the style of the border. 
  
  Here is an example of a 5px solid border:

  

  *To change the border of the Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  border: 5px solid !important;
  }
  
  

• You can also change the color of the border.
  
  Here is an example of a black border color:

  

  *To change the border-color of the Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  border-color: #000000 !important; 
  }
  
  

• Border-radius changes the squareness of the button. The higher the number, the more round the button will be. The default border radius for this button is 3px.    
  
  Here is an example of the border radius set to 20px:
  

  

  *To change the border-radius of the Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  border-radius: 20px !important;
  }
  
  

• The button by default does not have a shadow around the bottom of the button. An example of having a shadow would be "0 1px 1px #1acb98". The first number '0' sets the shadow directly under the button. The first '1px' sets the size of the shadow. The second '1px' sets the fade of the shadow, and the hexcode sets the color. 
  
  Here is an example of the box-shadow set to 0 7px 7px #1acb98:

  

  *To change the box-shadow of the Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  box-shadow: 0 7px 7px #1acb98 !important;
  }
  
  

• Padding changes how much space is inside the button, between the text and the border.  The first number changes the top and bottom padding.  The second number changes the left and right padding. The default is set to 10px 15px. You may wish to explore adding CSS specific to top, right, bottom, left.  
  
  Below is an example of the padding set to 25px 45px. Obviously, you will want the padding to be even on all sides so that the text is centered in the button. 

  

  *To change the padding of the Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  padding: 25px 45px !important;
  }
  
  
• The default text or font color is set to white.  The "color" line indicator of the code designates font color, and would be important to note if you changed other colors of the button. 
  
  Here is an example of the text color to black:
  
  *To change the text color of the Save Search button:
  .sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
  color: #hexcode !important;
  }

Applying Multiple Changes

If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:

.sidx-container .sidx-dropdown-pill.sidx-save-search-pill {
padding: 25px 15px !important;
border-radius: 6px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #ffffff !important;
border: 1px solid !important;
border-color: #febe0f !important; 
}