Get Start

To start using the PRESS, you must include the file compiled.min.css or compiled.css in the HEAD of your website.

Now that the PRESS style is already on your website, every button that will be created will need the c-btn class

see below how the button will look with only the c-btn class

A button with only the class c-btn returns only a scaffold of the PRESS

Shadow Elevations

in PRESS 5 classes are available to include shadow on your button

Colors

by default PRESS has 9 base colors (Blue, Red, Yellow, Violet, Orange, Cyan, Pink, Green and Gray), these colors have a variation of 4 lighter tones and 4 darker tones, resulting in 81 available colors.

You can control colors of background, text and shadow

it's very easy to create your custom button, unleash your imagination

Size

to apply size to your button, there is no mystery. There are five classes for handling button sizes, c-btn--sm, c-btn--md, c-btn--lg, c-btn--xl and c-btn--full-width

You can combine the classes with sufix 'sm, md, lg, xl' with the class c-btn--full-width

Border Radius

There are six classes for handling border radius, these have the suffix 'radius-2 to radius-64'

Outlines Mode

To include outlines on your buttons is very easy, just add the class c-btn--outline and ready

Tooltips

There are four possible directions for controlling tooltip (top, right, bottom and left) and to include a message within the tooltip, just include the class c-btn--(size)--square in your button and create a span inside the button with the classes c-tooltip and c-tooltip--(position)

Icon

to add an icon to your button is very simple, just include a span tag to the desired side in relation to the content, and include the class c-btn__icon-right or __icon-left in the span

if you want a button with only the icon and the same height and width then include one of the classes (c-btn--sm--square, c-btn--md--square, c-btn--lg--square or c-btn--xl--square)

Hover

to top it off with the icing on the cake, PRESS provides over 6000 possible hover combinations, let's see how easy it is to create a powerful hover

Background & Text

to create a hover for the background and the texts, just add the classes with the suffix --hover--(color) for the background and --hover--text--(color) for the text

Border Radius

it is possible to include hover to change the border radius, as in the background just use the class with suffix --hover--radius-(2 to 64)

Shadow Elevations

following the same idea it is possible to change the elevation and the color of the button's shadow, through the classes --hover--elevation-(1 to 5) or --hover--elevation-(1 to 5)--(color)

Combine all

Finally, you can combine all classes with a --hover suffix to create a custom button