Raised Button

Updated in the latest DS release

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. 

Primary

height: 24px;

width: 55px;

border-radius: ;

border: 1px SOLID #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 40px;

width: 73px;

border-radius: ;

border: 1px SOLID #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 32px;

width: 103px;

border-radius: ;

border: 1px SOLID #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 32px;

width: 81px;

border-radius: ;

border: 1px SOLID #000000;

background: #0073e7;

opacity: 1;

color: #010101;

Secondary 

height: 24px;

width: 55px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 40px;

width: 73px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 120px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 98px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

Negative

height: 24px;

width: 55px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #000000;

opacity: 1;

color: #000000;

height: 40px;

width: 73px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 109px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 87px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #000000;

opacity: 1;

color: #000000;

Primary

height: 24px;

width: 51px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 40px;

width: 65px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 91px;

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;

Secondary 

height: 24px;

width: 51px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 40px;

width: 65px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 108px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 86px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

Negative

height: 24px;

width: 51px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 40px;

width: 65px;

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: 75px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Button States

States for raised buttons

height: 32px;

width: 77px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 77px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 77px;

border-radius: ;

border: 1px SOLID #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 32px;

width: 69px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #e5004c;

opacity: 1;

color: #000000;

height: 32px;

width: 69px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 69px;

border-radius: ;

border: 1px SOLID #000000;

background: #1668c1;

opacity: 1;

color: #010101;

height: 32px;

width: 78px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #e5004c;

opacity: 1;

color: #000000;

height: 32px;

width: 78px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 78px;

border-radius: ;

border: 1px SOLID #000000;

background: #0053ac;

opacity: 1;

color: #010101;

height: 32px;

width: 97px;

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: 97px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

States for flat buttons

height: 32px;

width: 87px;

border-radius: ;

border: 1px #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: 87px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 79px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: #000000;

height: 32px;

width: 79px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 79px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #000000;

height: 32px;

width: 88px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: #000000;

height: 32px;

width: 88px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 88px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #000000;

height: 32px;

width: 97px;

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: 97px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

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 #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px SOLID #000000;

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 SOLID #e5004c;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px SOLID #e5004c;

background: #000000;

opacity: 1;

color: ;

Dimensions

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Button Group

Check Button Group

height: 32px;

width: 147px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #010101;

height: 32px;

width: 218px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #010101;

Check Button Group

height: 32px;

width: 147px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #010101;

height: 32px;

width: 199px;

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