buttons - Hemant-Patil/digitaldoc GitHub Wiki

Buttons are coded with standard HTML5 elements which makes it usable on mobile as well as desktop web applications. Button is formed with the help of Anchor tag and applied custom styling rules match MetLife branding per the Custom MetLife Theme.

These elements are custom designed and does not use jQueryMobile's Themes.

Sample markup to generate button element:

<a href="#" class="button red small">
<span>Button Caption/Title
</a>

Button element is created with the help of combination of three StyleSheet classes:

Structure

Base button Stylesheet class is responsible to render core structure of button element which includes following aspects:

• Font appearance (i.e. Type, Color and Size)
• Text color and padding
• Border

Markup of Base button stylesheet class:

.button {
    color: #ffffff;
    font-family: FrutigerLTStdRoman;
    font-size: 16px;
    text-shadow: none;
    text-decoration: none;
    text-align: center;
    padding:0.4em 0px 0px 0px;
    border-radius: 0.45em;
    display: inline-block;
}

Color

This class changes the appearance of button with either RED, GREEN or BLUE background. E.g. button with red background can be created with the combination of structure and color classes as shown in below snippet:

.button.red { 
    border:solid 1.27411px rgb(144, 39, 38);
    background:-moz-linear-gradient(50% 0.307848% -90deg,
    rgba(217, 85, 79, 1) 0%,
    rgba(175, 86, 82, 1) 88.1519%);
    background:-webkit-gradient(linear,50% 0.307848%,50% 88.1883%,
    color-stop(0, rgba(217, 85, 79, 1)),
    color-stop(1, rgba(175, 86, 82, 1)));
}
// Following markup provides pressed/active/hover effect to button element //
.button.red.active{ 
    border:solid 1.27411px rgb(144, 39, 38);
    background:-moz-linear-gradient(50% 0.309379% -90deg,
    rgba(191, 75, 70, 1) 0%,
    rgba(148, 73, 69, 1) 88.1532%);
    background:-webkit-gradient(linear,50% 0.309379%,50% 88.1898%,
    color-stop(0, rgba(191, 75, 70, 1)),
    color-stop(1, rgba(148, 73, 69, 1)));
}

Size

This class decides the width of button element. Based on the width, button element can be Small, Medium or Large in size.

.button.small { width : 35%; }
.button.medium { width : 70%; }
.button.large { width : 100%;}