<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" />
<!-- Angular Material Dependencies -->
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="materialDesignApp" ng-controller="MainCtrl" class="buttondemoBasicUsage">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
<md-button md-no-ink="" class="md-primary">Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">{{title4}}</md-button>
<div class="label">Flat</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="md-raised">Button</md-button>
<md-button class="md-raised md-primary">Primary</md-button>
<md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
<md-button class="md-raised md-warn">Warn</md-button>
<div class="label">Raised</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="md-fab" aria-label="Eat cake">
<md-icon md-svg-src="cake.svg"></md-icon>
</md-button>
<md-button class="md-fab md-primary" aria-label="Use Android">
<md-icon md-svg-src="img/icons/android.svg"></md-icon>
</md-button>
<md-button class="md-fab" ng-disabled="true" aria-label="Comment">
<md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
</md-button>
<md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
<md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
</md-button>
<md-button class="md-fab md-mini" aria-label="Eat cake">
<md-icon md-svg-src="cake.svg"></md-icon>
</md-button>
<md-button class="md-fab md-mini md-primary" aria-label="Use Android">
<md-icon md-svg-src="img/icons/android.svg" style="color: greenyellow;"></md-icon>
</md-button>
<div class="label">FAB</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
<md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>
<md-button>Default Button</md-button>
<div class="label">Link vs. Button</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
<md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
<md-button class="md-accent">Accent</md-button>
<md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
<div class="label">Themed</div>
</section>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="md-icon-button md-primary" aria-label="Settings">
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<md-button class="md-icon-button md-accent" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
<md-button href="http://google.com" title="Launch Google.com in new window" target="_blank" ng-disabled="true" aria-label="Google.com" class="md-icon-button launch">
<md-icon md-svg-icon="img/icons/launch.svg"></md-icon>
</md-button>
<div class="label">Icon Button</div>
</section>
</md-content>
</body>
</html>
app = angular.module('materialDesignApp', ['ngMaterial', 'ngAria']);
app.controller('MainCtrl', function($scope) {
$scope.title1 = 'Button';
$scope.title4 = 'Warn';
$scope.isDisabled = true;
$scope.googleUrl = 'http://google.com';
});
/* Styles go here */
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
.buttondemoBasicUsage .label {
position: absolute;
bottom: 5px;
left: 7px;
font-size: 14px;
opacity: 0.54;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="cake"><path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z"/></g></svg>