See All Results Button

Listings on hotsheets are limited to up to 60 listings. If your hotsheet has more than 60 listings, it's a great idea to include a link to the full set of results. When you opt-in for this link, a "see all results" button will populate just below the hotsheet results, and look like this:

To edit this button's colors, you can use this code:

.sidx-container .sidx-button, .sidx-container button {
background-color: #hexcode !important;
color: #hexcode !important;
}

There are some other changes you can make to this button if you'd like to further adjust the look.

border-radius: /Changes the squareness of the button. Default is set to 6px. The higher the number, the more round the button will be/
Here is an example of the border radius set to 20px:

padding: /Changes how much space is inside the button. Default is set to 10px 15px. The first number changes the top and bottom padding. The second number changes the left and right padding/
Here is an example of the padding set to 25px 45px:

border: /This button does not currently have a border set. You can add a border if you like. 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 1px solid border:

border-color: /If you decide to add a border, you can also change the color of the border. Simply add a hexcode prefixed with a hashtag/
Here is an example of a border colored #febe0f:

box-shadow: /The button by default has a shadow around the bottom of the button. This is set to 0 1px 1px #99a9af by default. 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:

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:

Remember, place this code in the custom CSS box under Settings > Design. Clear your caches and check your web page in an incognito browser to see the change!