Raised Button
The raised buttons are rectangular shaped. When the layout is busy and varied, using raised buttons will help to emphasize the functions. There should be only one primary button and one neutral button present on screen at any given state. All other actions will be secondary. Actions with a risk potential (such as delete, terminate, etc.) should use the ‘Negative’ style, to reduce the chance of mistakenly hitting them.
height: 32px;
width: 155px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
height: 32px;
width: 74px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
Button types
height: 32px;
width: 87px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #010101;
height: 32px;
width: 98px;
border-radius: ;
border: 1px SOLID #4c4e50;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 81px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
Sizes
height: 40px;
width: 73px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
height: 32px;
width: 80px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
height: 24px;
width: 55px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
States
height: 32px;
width: 109px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 100px;
border-radius: ;
border: 1px #000000;
background: #0053ac;
opacity: 1;
color: #010101;
height: 32px;
width: 91px;
border-radius: ;
border: 1px #000000;
background: #0066cc;
opacity: 1;
color: #010101;
height: 32px;
width: 99px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
height: 32px;
width: 109px;
border-radius: ;
border: 1px SOLID #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 100px;
border-radius: ;
border: 1px SOLID #4c4e50;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 91px;
border-radius: ;
border: 1px SOLID #4c4e50;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 99px;
border-radius: ;
border: 1px SOLID #4c4e50;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 109px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 100px;
border-radius: ;
border: 1px #000000;
background: #a30036;
opacity: 1;
color: #010101;
height: 32px;
width: 91px;
border-radius: ;
border: 1px #000000;
background: #c20040;
opacity: 1;
color: #010101;
height: 32px;
width: 99px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #010101;
Flat Button
height: 32px;
width: 144px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 62px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Button types
height: 32px;
width: 76px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 86px;
border-radius: ;
border: 1px SOLID #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 70px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Sizes
height: 40px;
width: 65px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 69px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 24px;
width: 51px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
States
height: 32px;
width: 97px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 89px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #000000;
height: 32px;
width: 80px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #000000;
height: 32px;
width: 88px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 97px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 88px;
border-radius: ;
border: 1px SOLID #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 79px;
border-radius: ;
border: 1px SOLID #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 87px;
border-radius: ;
border: 1px SOLID #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 97px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 32px;
width: 89px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #000000;
height: 32px;
width: 80px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #000000;
height: 32px;
width: 88px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Icon Button
Primary
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: ;
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: ;
Secondary
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 32px;
border-radius: ;
border: 1px SOLID #4c4e50;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 32px;
border-radius: ;
border: 1px SOLID #4c4e50;
background: #000000;
opacity: 1;
color: ;
Negative
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: ;
height: 32px;
width: 32px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: ;
Check Button Group
Primary / emphasis
height: 32px;
width: 144.00390625px;
border-radius: 2;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: ;
height: 32px;
width: 283.00402832031px;
border-radius: 2;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
Secondary / neutral
height: 32px;
width: 144.00390625px;
border-radius: 2;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 283.00402832031px;
border-radius: 2;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Radio Button Group
Primary / emphasis
height: 32px;
width: 98px;
border-radius: 2;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 150px;
border-radius: 2;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Secondary / neutral
height: 32px;
width: 98px;
border-radius: 2;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 32px;
width: 150px;
border-radius: 2;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
