Below is a snapshot of the AngularJS Material button component demos with the default themes and standard options:
CSS Styles
The base CSS class for all <md-button> components is .md-button:
.md-button {
padding: 0 6px 0 6px;
margin: 6px 8px 6px 8px;
min-width: 88px;
border-radius: 3px;
font-size: 14px;
text-align: center;
text-transform: uppercase;
text-decoration:none;
border: none;
outline: none;
}
When defining custom CSS overrides, developers should create their own CSS class. For example, to define a .btn1 override to md-button use:
.btn1 {
// your custom overrides here
}
Accept
Theme Requirements
All AngularJS Material components have specific CSS rules constructed using the theme name and theme-class overrides. For the Default theme, however, these rules are added to the components styles using the .md-default-theme class. If, however, you have configured a custom theme called companyX that is NOT the default theme, then any CSS overrides must use fully-specified classname. For <md-button> the fully-specified classname will be .md-button.md-companyX-theme.btn1.
.md-button.md-companyX-theme.btn1 { }
.md-button.md-companyX-theme.md-primary.btn1 { }
.md-button.md-companyX-theme.md-accent.btn1 { }
.md-button.md-companyX-theme.md-warn.btn1 { }
Button
.md-button {
color : currentColor;
}
.md-button:not([disabled]):hover {
background-color: rgba(158, 158, 158, 0.2);
}
.md-button[disabled] {
color : rgba(0, 0, 0, 0.26);
background-color: transparent;
}
Custom CSS Overrides
Button
.btn1 {
color : rgb(49, 46, 46);
background-color: rgba(255, 222, 121, 0.96);
border-radius: 10px 0 0 10px;
font-size: 16px;
}
.btn1:not([disabled]):hover {
background-color: rgba(107, 103, 91, 0.96);
color: white;
}
.btn1[disabled] {
color : rgb(187, 187, 187);
background-color: rgba(230, 230, 229, 0.96);
}
Add the .md-raised class to create a raised button:
Button
.md-button.md-raised:not([disabled]) {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
Add the .md-cornered class to create a button with corners:
Button
.md-button.md-cornered {
border-radius: 0;
}
Add the .md-fab class in order to create a floating action button (aka FAB):
.md-button.md-fab {
line-height: 5.6rem;
min-width: 0;
width: 5.6rem;
height: 5.6rem;
border-radius: 50%;
}
Add the .md-mini class in order to create small, mini-FAB buttons:
.md-button.md-fab.md-mini {
line-height: 4rem;
width: 4rem;
height: 4rem;
}
Create icon buttons by adding the .md-icon-button class and the <md-icon ...> component:
.md-button.md-icon-button {
margin: 0 0.6rem;
height: 4.8rem;
min-width: 0;
line-height: 4.8rem;
padding-left: 0;
padding-right: 0;
width: 4.8rem;
}
Here is another example of a button with font icons:
Grouping with CSS Overrides
Using the customization approaches documented above, we can easily create a mdButtonGroup:
.groupX {
font-size: 16px;
margin: 20px 0;
padding: 3px 15px 3px 15px;
color: rgb(49, 46, 46);
background-color: rgba(224, 224, 224, 0.96);
text-transform: none;
font-weight: 400;
min-width:100px;
}
.md-button.left {
border-radius: 10px 0 0 10px;
}
.md-button.middle {
border-radius: 0;
border-left: 1px solid rgba(230, 230, 230, 0.96);
border-right: 1px solid rgba(230, 230, 230, 0.96);
}
.md-button.right {
border-radius: 0 10px 10px 0;
}
.md-button:not([disabled]):hover {
background-color: rgba(193, 193, 193, 0.96);
color: rgba(44, 65, 164, 0.96);
transition: 0.3s;
}