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
Raised Buttons
UI Components
The raised buttons are rectangular shaped.
When the layout is busy and varied, using raised buttons will help to emphasize the functions.

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.

Raised Buttons Properties

NEUTRAL
TEXT
White
BACKGROUND
Fill: W3C Compliant
HOVER
TEXT
White
BACKGROUND
Fill: W3C Compliant
Shadow: 3px 3px,
Black 15%
CLICKED
TEXT
White
BACKGROUND
Fill: Cerulean
DISABLED
TEXT
Black, 20%
BACKGROUND
Fill: Black 5%
NEUTRAL
TEXT
Black
BACKGROUND
Fill: None
Border: 2px, Black
HOVER
TEXT
Black
BACKGROUND
Fill: None
Border: 2px, Black
Shadow: 3px 3px,
Black 15%
CLICKED
TEXT
Black
BACKGROUND
Fill: Black-10%
Border: 2px, Black
DISABLED
TEXT
Black, 20%
BACKGROUND
Fill: None
Border: 2px, Black 20%
NEUTRAL
TEXT
White
BACKGROUND
Fill: Crimson Negative
HOVER
TEXT
White
BACKGROUND
Fill: Crimson Negative
Shadow: 3px 3px,
Black 15%
CLICKED
TEXT
White
BACKGROUND
Fill: Plum
DISABLED
TEXT
Black, 20%
BACKGROUND
Fill: Black 5%
NEUTRAL
TEXT
Dark Blue
BACKGROUND
Fill: None
Border: 2px, Dark Blue
HOVER
TEXT
Dark Blue
BACKGROUND
Fill: None
Border: 2px, Dark Blue
Shadow: 3px 3px,
Black 15%
CLICKED
TEXT
Dark Blue
BACKGROUND
Fill: Dark Blue-10%
Border: 2px, Dark Blue
DISABLED
TEXT
Black, 20%
BACKGROUND
Fill: None
Border: 2px, Black 20%

Raised Buttons Redlines