Add Button

Add Default Button From Scratch

To add a button from scratch, we are going to rely on some existing classes and styling that should already be in place on the site. We simply need to decide on how to code the button based on what we need from it.

The most basic form of Bootstrap HTML for a button is as follows:

Primary & Secondary Button Styling

However, we don’t typically have “btn-default” styling in place for buttons. We usually rely on two “types” of button styling – primary & secondary. This means we need to change btn-default to btn-primary or btn-secondary depending on how much we want the button to stand out. The “primary” class on any dealer’s site is going to be the bolder and more obvious one, where the “secondary” class will be less so. Use your best judgement to determine which would be more appropriate for the scenario you need the button for, but both of these should be prepped for appropriate branding and colors for the site.

Button Size

Finally, we should determine the appropriate size we want to use. We can add more information into the a class to tell the button what size we want it to be. If we don’t add any information, it will default to the “medium” size of button. To specify a size, simply add “btn-lg”, “btn-md”, “btn-sm” or “btn-xs” to the class.

Open

Finally, you’ll want to replace the “#” after href= with the appropriate link, and “Button Text” with whatever you want the button to say. A generic example of a more “complete” button is below.

Adding Icon to Button

You may also want to add an icon in the text of the button to emphasize the text. You can use FontAwesome’s library to obtain the code for the icon you’d like to use. Simply copy the code provided for the icon and place it next to the text for the button, as in the example below:

This would create a button that looks something like this:

Open

Add Copy of Existing Button

If a dealer is asking for a button to imitate another button currently on their site, this will show you how to copy the existing HTML to repeat that button. There are two scenarios where we will be asked to do this and the information can be found in two different ways.

Copying a button we created

To repeat a button that exists on another part of the site that may have special styling compared to the defaults above, if we created it with special CSS styling etc in the past, we can simply copy the HTML from the page where this button already exists.

Find the page you’re looking for in ICC, and open up the page’s Code Editor. Once you find the button in question, simply copy the code with the relevant classes

Copying a button from a form or other source we can’t edit

Coming soon

Customizing & Changing Button

Coming soon