Skip to Main Content

LibGuides Tips and Tricks

Create Buttons

You can add custom buttons to your LibGuides by using the built-in Bootstrap features. 

This is a standard button: 

This is a primary button: 

This is a success button: 

This is an informational alert button: 

This is a warning button: 

This is a danger button: 

This is a button that looks like a link: 

You can make buttons larger: 

You can make buttons smaller: 

You can make buttons extra small: 

Here is the code for buttons:

  • Standard button: <button class="btn btn-default" type="button">Default</button>
  • Primary button: <button class="btn btn-primary" type="button">Primary</button>
  • Success button: <button class="btn btn-success" type="button">Success</button>
  • Informational alert button: <button class="btn btn-info" type="button">Info</button>
  • Warning button: <button class="btn btn-warning" type="button">Warning</button>
  • Danger button: <button class="btn btn-danger" type="button">Danger</button>
  • Button that looks like a link: <button class="btn btn-link" type="button">Link</button>
  • Large button: <button class="btn btn-primary btn-lg" type="button">Large button</button>
  • Small button: <button class="btn btn-primary btn-sm" type="button">Small button</button>
  • Extra small button: <button class="btn btn-primary btn-xs" type="button">Extra small button</button>

You can customize buttons further with CSS. You can apply CSS to any of the button classes, but it is a better choice to create your own button class.  You can use CSS such as this to customize a button:

<style>

 /*Below customizes a button*/

.btn-Aestiva {

background-color: #3c9339;
color: #FFFFFF;
 }

</style>

Then use the following code to create the button on the guide: 

<p><button class="btn btn-Aestiva" type="button">Aestiva button</button></p>

 

See more CSS options here from W3Schools.

Now it's time to make your button do something!
 

This is a button that links to Google: 

Visit Google 

<a class="btn btn-info" href="https://www.google.com" role="button">Visit Google</a>

Or, use buttons in custom forms.