FOLLOW US!

Stay up to date on latest trands and cool link to get inspired

subscribe

We share all studio videos on our YouTube Channel

We have great stuff to share!

Subscribe to our mailing list to get great stories, event & updates.We won't junk your mail :)
Oops,our robot think the email address is wrong, please double check
Flat Buttons
UI Components

Primary, Secondary and Negative Buttons

All of our buttons should specify the action that will occur once clicking them.

The flat buttons are text-only, used in dialogs, toolbars or within the page, as long as they are distinguishable.

Actions with a risk potential (such as delete, terminate, etc.) should use the ‘Negative' style, to reduce the chance of mistakenly hitting them.

Accented Button

There should be only one primary button and one accent button present on screen at any given state. All other actions will be secondary.

Flat Buttons Properties

Neutral
TEXT
W3C Compliant
BACKGROUND
Fill: None
Hover
TEXT
W3C Compliant
BACKGROUND
Fill: W3C Compliant-5%
Clicked
TEXT
W3C Compliant
BACKGROUND
Fill: W3C Compliant-10%
Disabled
TEXT
Black, 20%
BACKGROUND
Fill: None
Neutral
TEXT
Black
BACKGROUND
Fill: None
Hover
TEXT
Black
BACKGROUND
Fill: Black-5%
Clicked
TEXT
Black
BACKGROUND
Fill: Black-10%
Disabled
TEXT
Black, 20%
BACKGROUND
Fill: None
Neutral
TEXT
Crimson Neg...
BACKGROUND
Fill: None
Hover
TEXT
Crimson Neg...
BACKGROUND
Fill: Crimson Negative-5%
Clicked
TEXT
Crimson Neg...
BACKGROUND
Fill: Crimson Negative-10%
Disabled
TEXT
Black, 20%
BACKGROUND
Fill: None
Neutral
TEXT
Dark Blue
BACKGROUND
Fill: None
Hover
TEXT
Dark Blue
BACKGROUND
Fill: Dark Blue-5%
Clicked
TEXT
Dark Blue
BACKGROUND
Fill: Dark Blue-10%
Disabled
TEXT
Black, 20%
BACKGROUND
Fill: None

Flat Buttons Redlines