Back to top

Calls to action


Any element (most commonly <a>) used as a button gets the .btn class applied. Also, the following elements:

  • <button>
  • <input[type="button"]>
  • <input[type="submit"]>
are styled the same way by default.

NYPL buttons should also have the .gradient class added to them. The gradient styling is not applied by default so that it may be omitted from a button if appropriate. (This is much better practice than overriding the default style.)

You may also add the .btn--inactive class for a "grayed-out" style.

					<button class="gradient">Get this thing!</button> 

<button class="btn--inactive">Don't get this thing.</button>

Get this thing!


Use the following alternative .btn-- styles to create buttons of different sizes.

					<button class="gradient btn--small">small</button>
<button class="gradient btn--large">large</button>
<button class="gradient btn--huge">huge</button>

You can also add the text classes for bigger/smaller text.

Note that the button's padding shrinks or grows proportionally based on the text class. In the above examples, I've only added button size classes; the text size remains the same. Below, I've made some ridiculously mismatched button/text size combos to demonstrate the need to be careful with your classes. (In other words, watch out for Buttons of Unusual Size.)

					<button class="gradient btn--small micro">small button, micro text</button>
<button class="gradient btn--huge micro">huge button, micro text</button>
<button class="gradient kilo">regular button, kilo text</button>

There's also a class called .btn--natural, which inherits its type size and padding from its parent element, which is handy for inline calls-to-action. (Note: the other button and text size classes will have no effect on this style.)

					<button class="gradient btn--natural">natural</button>

You make me feel like a woman

Specific NYPL use contexts

Some NYPL calls-to-action, like the "Donate" button, have very specific styles. Again: at the moment I don't have a better way to assign these styles, but so far I've got .btn--donate and .btn--friends. This will develop over time, I'm sure.

The Donate button

						<button class="btn--donate">Donate now</button>

Possible Friends-specific button style

						<button class="btn--friends">Become a friend</button>

Note: if you are using any of the additional call-to-action classes listed below on an element that does not have the .btn styling applied by default, don't forget to also add .btn class first!.

					<a class="btn gradient btn--greenNeon">greenNeon</a>