Press.css is a flat, lightweight, scalable, no bullshit button library for your projects influenced by Google's Material Design guidelines. The markup is simple, easy to use and predictable and helps ensure a uniform button experience across all pages of your site or your app.
The markup for press buttons is simple: use an
button element and add the desired classes. It sounds simple, but then it gets even more simple. It's like simple squared. So it seems complex, but it's not.
At the very minimum, you need the
<button class="press press-red">Square Button</button>
You can have more fun with it as well:
<button class="press press-bluegrey press-round press-ghost press-xl">Round Button</button>
This classic squared button is sharp as a knife. Be careful or you'll cut yourself on those sharp corners.
The much softer brother to the square button, round buttons are friendly and happy to be pressed.
These pill-shaped, medicinal buttons are hard to swallow, but it will remind your user to take their meds.
Circle buttons are perfect for your favorite glyphicons or numbers! Too much content will disappear. :'(
Deep down, we all know that size does matter. Press.css sizes are based on
font-size: 1em;. Need a different size? Add it in SASS.
Don't know how to SASS? Well, I am sorry to inform you that I'm not the genie from Aladdin and I don't make wishes come true.
You ain't never had a friend like me.
Other libraries have a ton of effects, horse buttons...buttons on fire...
...oh gah...make it stop... Press.css keeps it simple and has only three effects. This reduces the amount of code the browser must load and keeps thing as flat/materialistic as digitally possible.
Press.css can make things float above the page, but like a crappy magician working for tips at a strip mall near you: it still can't magically tell you your card. (Ace of Spades. No? Fine.)
Spooky! Ghost buttons are inversions of the regular buttons, but when hovered and clicked look nearly identical. Just add the ghost class to give a good "Boo!"
Press.css uses the already existing CSS selectors for buttons. No classes need to be added or removed, just change the HTML disable attribute to prevent a nuclear meltdown.
Press.css comes with 21 default colors. "But 21 colors is not enough! I need all the colors." Well, good news! Extending Press.css is as easy as adding an additional CSS rule.
< 3 KB - Small and mighty.
Press.css in a compiled, minified format with all the shapes, sizes, features and colors.
PS: Works great with normalize.css
Repo on Github
The source and the compiled file are available in a convenient Github repository.
Fork me so hard.
Buttons are only the beginning.
At this point, Press.css will focus on individual web components, like buttons. Eventually, Press.css will expand its scope to become more of a pick-and-choose style guide without a grid to keep the CSS file small and as flexible as possible (i.e. use your preferred grid system).
TL;DR: There is more to come.