@ngdoc content @name button @description

<md-button>

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:

<hljs lang="css"> .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; } </hljs>

When defining custom CSS overrides, developers should create their own CSS class. For example, to define a .btn1 override to md-button use:

<hljs lang="css"> .btn1 { // your custom overrides here } </hljs> <hljs lang="html"> <md-button class="btn1" ng-click="acceptOffer();"> Accept </md-button> </hljs>

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.

<hljs lang="css"> .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 { } </hljs>

Flat Buttons

<hljs lang="html"> <md-button> Button </md-button> </hljs> <hljs lang="css"> .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; } </hljs>

Custom CSS Overrides

<hljs lang="html"> <md-button class="btn1"> Button </md-button> </hljs> <hljs lang="css"> .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); } </hljs>

Raised Buttons

Add the .md-raised class to create a raised button:

<hljs lang="html"> <md-button class="md-raised">Button</md-button> </hljs> <hljs lang="css"> .md-button.md-raised:not([disabled]) { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } </hljs>

Cornered buttons

Add the .md-cornered class to create a button with corners:

<hljs lang="html"> <md-button class="md-raised md-cornered">Button</md-button> </hljs> <hljs lang="css"> .md-button.md-cornered { border-radius: 0; } </hljs>

Default FAB Button

Add the .md-fab class in order to create a floating action button (aka FAB):

<hljs lang="html"> <md-button class="md-fab" aria-label="Eat cake"> <md-icon md-svg-src="img/icons/cake.svg"></md-icon> </md-button> </hljs> <hljs lang="css"> .md-button.md-fab { line-height: 5.6rem; min-width: 0; width: 5.6rem; height: 5.6rem; border-radius: 50%; } </hljs>

Mini FAB Button

Add the .md-mini class in order to create small, mini-FAB buttons:

<hljs lang="html"> <md-button class="md-fab md-mini" aria-label="Eat cake"> <md-icon md-svg-src="img/icons/cake.svg"></md-icon> </md-button> </hljs> <hljs lang="css"> .md-button.md-fab.md-mini { line-height: 4rem; width: 4rem; height: 4rem; } </hljs>

Icon button using SVGs

Create icon buttons by adding the .md-icon-button class and the <md-icon ...> component:

<hljs lang="html"> <md-button class="md-icon-button md-primary" aria-label="Settings"> <md-icon md-svg-icon="img/icons/menu.svg"></md-icon> </md-button> </hljs> <hljs lang="css"> .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; } </hljs>

Icon button using Font-icons

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:

<hljs lang="html"> <section layout="row" layout-align="center center"> <md-button class="groupX left">Apple</md-button> <md-button class="groupX middle">Samsung</md-button> <md-button class="groupX middle">Sony</md-button> <md-button class="groupX right">B&O</md-button> </section> </hljs> <hljs lang="css"> .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; } </hljs>