City of Tampa Style Guide

Buttons 3.2

Toggle example guides Toggle HTML markup

Buttons are visual controls for primary actions a users should engage with on the page. Use colors to draw attention to primary buttons and outlined buttons for secondary actions.

When to use: To identify the main controls you expect the users to need and make them buttons for a user to easily identify them.

When not to: Don't overuse buttons, they should be for primary actions, less important controls can be simple text hyperlinks.

Notes: When to use a button or link?

  • Does the Control Take Me to Another Page? Use a Link/Anchor
  • Does the Control Change Something on the Current Page? Use a Button

<insert-markup>content.buttons-</insert-markup>
Link that looks like a button
Link with .button class Link 
<a class="btn btn-primary" href="#" role="button">Link that looks like a button</a>
<button class="link" role="button" type="button">Button that looks like a link</button>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
    </div>
</div>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-link">Link</button>
        <a class="button" href="#" role="button">Link with .button class</a>
        <a class="btn btn-primary" href="#" role="button">Link</a>
        <button class="btn btn-primary" type="submit">Button</button>
        <input class="btn btn-primary" type="button" value="Input">
        <input class="btn btn-primary" type="submit" value="Submit">
        <input class="btn btn-primary" type="reset" value="Reset">
    </div>
</div>
<div class="row padded">
    <div class="col bg-dark padded">
        <button type="button" class="btn btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-outline-success">Success</button>
        <button type="button" class="btn btn-outline-danger">Danger</button>
        <button type="button" class="btn btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-outline-info">Info</button>
        <button type="button" class="btn btn-outline-light">Light</button>
    </div>
</div>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-primary" disabled>Primary button</button>
        <button type="button" class="btn btn-secondary" disabled>Button</button>
    </div>
</div>
<div class="row padded">
    <div class="col">
        <button type="button" class="btn btn-link">Go Back</button>
        <button type="button" class="btn btn-outline-primary">Reset</button>
        <button type="button" class="btn btn-primary">Continue</button>
    </div>
</div>
<div class="row padded">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>
</div>
Source: src/scss/base/_buttons.scss, line 1