Web buttons

Yellow Button

Purple Button

CTA Button
Arial 14px, bold, all caps
Padding: 20, 10, 20, 10
Line-height: 18px
bg-color: #450084 or #FFBD00
rounded-corner: 5px
Hover color: #8F66B5 OR #FFCC3E

Form buttons
Arial 14px; all caps
Padding: 15, 5, 5, 15px
bg-color: #B2B2B2 text color #595959
OR
bg-color: 450084 text color #FFFFFFF

In cascade, apply the style "yellow-button" or "purple-button" to the text.

  • A button should never contain more than 20 characters.
  • A button should never be more than two lines of text.
  • Don’t have more than one yellow CTA button on a page; multiple CTAs can be purple.
  • Avoid grouping multiple buttons of different styles together.
Color with buttons

Purple buttons can be used with light purples, gray and gold background colors; yellow buttons work with light purple backgrounds, gray and gold, and the lightest secondary shades. Do not put the buttons on any other background color than these: 


Button


Button


Button


Button


Button


Button


Button


Button

Social icons

Use images from this set of icons.

fb
Facebook
flickr
Flickr
instagram
Instagram
google plus
LinkedIn
google plus
Twitter
google plus
Wordpress
google plus
YouTube
Download Icon Download Icon Download Icon Download Icon Download Icon Download Icon Download Icon
Video button
example

When including a graphic that links to a video, place this button graphic over the image. For example, this image is a still from a Holiday video, and the button overlay implies that clicking it will take you to the video. 

play button

Light button
Download Button

play button

Dark button
Download Button

Next Buttons
Factoid overlay
factoid

Image size:

1000px by 600px

Specs

Factoid overlay:

480px by 124px

  • Background: white, 70% transparency
  • Size of the large number depends on the number, but should be large and attention-grabbing. Balance the number with the amount of text beside it. There should be 15px of padding between the content and the edge of the overlay.
  • The button is 40px tall, with 10px above and below the text and 20px to the left and right.
  • Save as a PNG, to preserve the transparency.

Back to Top