Each button has a unique ID or a Class associated with them. You can apply CSS using this ID or Class. These IDs and Classes can be identified and the CSS can be preemptively tested using the developer tools provided in the Chrome browser.
If you'd like to read more about using Chrome to edit CSS, click on the link below:
https://developer.chrome.com/devtools/docs/elements-styles
All CSS styles are saved in the common-styles.min.css file under the:
/CustomPages/CSS/
directory. You can also access the CSS for your site under Settings > CSS Editor.
Edit the styles in your buttons: (This tutorial is written using the Chrome browser.)
- Right-click on the button to be edited and select Inspect Element.
- The Chrome developer tools window will appear at the bottom of the screen and the selected button element will be highlighted. Identify the unique ID or the Class associated with the button.
- Add the CSS styles as desired using either the ID or the Class. As an example, for the above button, following CSS selectors can be used:
Using the button ID:
#btnViewCartCheckout{ /*Your Styles */ }
Using the button Class:
.proceed-to-checkout{ /*Your Styles */ }
Note: Classes can be used across multiple elements, therefore using the class to add CSS styles may affect other buttons or elements that use the same class on the site.
Below are a few examples how you can set the CSS styles.
Using an existing image as the background and hiding the button text:
#btnViewCartCheckout
{
color: transparent;
background: url("images/StoreFront_System_Images/FloatShoppingcart_checkout.gif");
width: 125px;
height: 30px;
background-repeat: no-repeat;
border: none;
cursor: pointer;
padding: 0px;
}
Changing background color, font color, and size of the button:
#btnViewCartCheckout
{
background: #0f2f45; /*Background color*/
text-decoration: none; /*underline, strike through etc.*/
color: #ffffff !important; /*Font color*/
cursor: pointer; /*Change the cursor upon hovering over*/
border: none;
border-radius: 5px; /*Make round edges*/
width: 160px; /*Button width*/
height: 40px; /*Button height*/
font-size: 14px;
font-weight: bold;
}
Changing background color on hovering over the button:
#btnViewCartCheckout:hover
{
background: #339966; /*Background color*/
text-decoration: none; /*underline, strike through etc.*/
color: #ffffff !important; /*Font color*/
cursor: pointer; /*Change the cursor upon hovering over*/
border: none;
border-radius: 5px; /*Make round edges*/
width: 160px; /*Button width*/
height: 40px; /*Button height*/
font-size: 14px;
font-weight: bold;
}