Buttons

Every button used on a CareCredit web page should follow these basic styles. Buttons should always appear to respond to a user's interaction, giving a visual reinforcement that they are "active".

When creating forms, it is especially important to provide instructions and cues that will help all users to avoid and correct mistakes. This is especially important for those with accessibility issues. In order to ensure that the forms meet the accessibility standards of the site developers should refer to the requirements in the toggle below.

WCAG 2.0 guidelines for accessibility

In order to be accessible for those using screen readers, all controls must have an equivalent alternative text name that describes its purpose. This includes all images, form image buttons, and image map hot spots. (WCAG2 1.1.1).

Button Alt Text Description Example:

        
<a href="#" alt="Apply Now" title="Apply Now" class="button submit">Apply Now</a>


  
  

Copy

Primary

Uses: Main CTA eg: Apply now, Play Video (in the Hero), Find Location, Send, Submit. Generally anything what involves submitting, sending or bringing up content would apply. Mobile/tablet buttons do not have hover states. Once clicked they will change to the desktop hover view (outline with colored text.) Font colors used are #FFFFFF for dark backgrounds and #66A137 for light backgrounds.

Secondary

Uses: Within the content eg: Learn More, More Articles, More Costs. Generally anything what involves viewing more information or taking you to another page with more information on CareCredit.com. Font colors used are #FFFFFF for dark backgrounds and #006F60 for light backgrounds.