Buttons

Flexible call to action buttons making external or on site links actionable.

Buttons Fragment

Call to action buttons

Code

+++
fragment = "buttons"
#disabled = false
date = "2016-09-07"
weight = 110
background = "secondary"

title = "Buttons Fragment"
#subtitle = ""
#title_align = "left" # Default is center, can be left, right or center

[[buttons]]
  text = "Button"
  url = "#"
  color = "secondary" # primary, secondary, success, danger, warning, info, light, dark, link - default: primary

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "success"

[[buttons]]
  text = "Button"
  url = "#"
  color = "danger"

[[buttons]]
  text = "Button"
  url = "#"
  color = "warning"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "info"

[[buttons]]
  text = "Button"
  url = "#"
  color = "light"

[[buttons]]
  text = "Button"
  url = "#"
  color = "dark"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "link"
+++

Buttons Fragment Outlined

Buttons with outlines

Code

+++
fragment = "buttons"
#disabled = false
date = "2016-09-07"
weight = 120
background = "secondary"

title = "Buttons Fragment Outlined"
subtitle = "Buttons with outlines"
#title_align = "left" # Default is center, can be left, right or center

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-secondary" # primary, secondary, success, danger, warning, info, light, dark, link - default: primary

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "outline-success"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-danger"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-warning"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "outline-info"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-light"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-dark"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "outline-link"
+++