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;

Questions? Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates