Links are underlined, and change color on hover.
Call me Ishmael. Some years ago–never mind how long precisely–having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
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"]>
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--donate and .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>