Overview
Buttons and links are an important part of every website, but hubsites dont always make them easy to work with so we have an easier to use alternative.
Sections
Add Button Link
1. Go to any text box within your hubsite.
2. Type in the content you would like to make into a button/link.
To create a button, you can do it completely in the code (skip to #6), or only add to the code what you have to (Continue)
3. Highlight the text you want to be a button. Go to the top of the text box and click on the link button.
4. Click the "Link Destination" field. Paste the link you wish to use into the destination field.
7. Wait! Choose a style first! Lets put together the class that you will add to the code.
- FIrst, you will add
- do you want the button to go across the whole section it is in, or not?
- stretch across = add btn-block
- do you want the button to be blue or grey?
- blue = add btn-primary
- gray = add btn-default
So, if I wanted a gray button that stretches acrross, the classes would be btn btn-block btn-default
If I wanted a blue button that doesnt stretch across, the classes would be btn btn-primary
8. Look for your content from your link. In our case, its "How to Make a Button". If you already created the link with steps 1-5, you will see <a href= and your websites address in green before your text.
Click between <a and href="" and type in class=""
8. Click in between the quotes and type add your classes from #7
Your link should look something like the code below. The bold parts are things that will change based on your content and the styling options above, but the unbolded parts should be the same. Make sure to watch your spacing and your quotes!
<a class="btn btn-primary" href="https://matsu.gov">Click Here</a>
10. You now have a button, styled with MSB's styles!
Edit Button Link
11. Click on the button to show the link editing buttons. Click on the links.
12. Replace the link with the correct address.
