Primary Buttons: Search, Post, Send Invitation and Create Account

There are a number of buttons that are linked to the same element within our plugin.

The search button on the search bar widget.   

The post button on the listing page, under the Friends and Family section.     

Friends and Family send invitation invite function.     

The create account button on the sign-up form.   

.....as well as a few others.

Customization Options

• *To change the background color:
  .sidx-container button.sidx-primary {
  background: #hexcode !important;
  }
  
  

• At Showcase IDX we typically like to use '1px solid' to define a border on buttons. The first number sets the thickness of the border and solid defines the style of the border.

  *To change the border:
  .sidx-container button.sidx-primary {
  border: 1px solid !important;
  }
  
  

• *To change the border-color:
  .sidx-container button.sidx-primary {
  border-color: #febe0f !important; 
  }
  
  

• Border-radius changes the squareness of the button. The higher the number, the more round the button will be.

  *To change the border-radius:
  .sidx-container button.sidx-primary {
  border-radius: 20px !important;
  }
  
  

• An example of a box-shadow code is '0 1px 1px #1acb98'. 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.

  *To change the box-shadow:
  .sidx-container button.sidx-primary {
  box-shadow: 0 7px 7px #1acb98 !important;
  }
  
  

• Changes how much space is inside the button.  The first number changes the top and bottom padding.  The second number changes the left and right padding.

  *To change the padding:
  .sidx-container button.sidx-primary {
  padding: 25px 45px !important;
  }
  

• The "color" line indicator of the shortcode designates text color.

  *To change the text color:
  .sidx-container button.sidx-primary {
  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 button.sidx-primary {
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; 
}