Buttons

Site UI buttons

These buttons are used as UI throughout the unauthenticated sections of HealthCare.gov, primarily to point site visitors to an application or tool. Within applications and tools, these buttons are used as topic links, to allow users to save or edit entries, or to add or remove items such as household members.

Example & Code

<button class="btn btn-green btn-sm">Small green</button>
<button class="btn btn-sm">Small default</button>

<button class="btn btn-green">Standard green</button>
<button class="btn">Standard default</button>

<button class="btn btn-green btn-md">Medium green</button>
<button class="btn btn-md">Medium default</button>

Main call to action: Applications

This button is used as the main call to action (CTA) on any page within an application. In applications we generally center buttons on the page as a means to emphasize a threshold, rather than simply as additional UI.

Example & Code

<button class="btn btn-green btn-lg btn-success">Main Call To Action</button>

Main call to action: Hero

This button is used as the main call to action (CTA) in the hero area of main landing pages on the unauthenticated side of HealthCare.gov. It's generally left aligned under the hero area H1.

Example & Code

<a class="btn btn-lg btn-success hero-btn" href="#">Main Call to Action: Hero</a>

Back to top

On long pages (such as search results), a back to top CTA allows people to jump to the top of a page without scrolling. This button is located on the bottom right near the scrollbar for easier discoverability. There's an example on the right side of this page.

Example & Code

<div class="bottom-right fadeable hidden-xs" id="back-to-top">
    <a href="#" class="btn btn-sm">
        <span class="glyphicon glyphicon-chevron-up"></span>Back to top
    </a>
</div>