Any element (most commonly
<a>) used as a button gets the
.btn class applied. Also, the following elements:
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>
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
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--friends. This will develop over time, I'm sure.
<button class="btn--donate">Donate now</button>
<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>