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. No more, no less. You can customize which colors you'd like by editing the
$colors map in the SASS file and compiling. There are two classes you'll have to overwrite:
press-white as the default text color is #FFF.
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.