1.资源文件准备
<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css">
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<script src="../node_modules/angular-aria/angular-aria.js"></script>
<script src="../node_modules/angular-material/angular-material.js"></script>
2.整理代码如下
<!DOCTYPE html>
<section layout="column" layout-align="start center">
<p>
<h1>1.md常用按钮(可选点击自带墨水波纹的按钮)</h1>
<div style="outline: dashed #009ddc">
<md-button layout-fill>平铺按钮</md-button>
<md-button>默认按钮</md-button>
<md-button class="md-primary">主要按钮</md-button>
<md-button class="md-accent">强调按钮</md-button>
<md-button class="md-warn">警告按钮</md-button>
<!--凸起浮雕效果-->
<md-button class="md-raised">凸起按钮</md-button>
<md-button class="md-accent md-raised">组合使用按钮</md-button>
<md-button class="md-no-focus">无风格按钮</md-button>
<md-button ng-disabled="true">禁用按钮</md-button>
</div>
</p>
<p>
<h1>2.图标文字按钮</h1>
<div style="outline: dotted #009ddc">
<md-button><md-icon md-svg-src="../img/gen.svg"></md-icon>默认按钮</md-button>
<md-button class="md-raised"><md-icon md-svg-src="../img/Android.svg"></md-icon>凸起按钮</md-button>
<md-button class="md-primary"><md-icon md-svg-src="../img/cake-tall.svg"></md-icon>主要按钮</md-button>
<md-button class="md-accent"><md-icon md-svg-src="../img/gen.svg">123</md-icon>警告按钮</md-button>
</div>
</p>
<p>
<h1>3.圆形图标按钮</h1>
<div style="outline: double #009ddc">
<md-button class="md-fab" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab md-warn" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab md-primary" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab" ng-disabled="true" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab md-mini" aria-label="mini"><md-icon md-svg-src="../img/people.svg"></md-icon></md-button>
<md-button class="md-fab md-mini md-primary" aria-label="mini"><md-icon md-svg-src="../img/people.svg"></md-icon></md-button>
</div>
</p>
<p>
<h1>4.图标按钮</h1>
<div style="outline:ridge #009ddc">
<md-button class="md-icon-button" aria-label="自定义按钮"><md-icon md-svg-icon="../img/cake-tall.svg"></md-icon></md-button>
<md-button class="md-icon-button md-warn" aria-label="自定义按钮"><md-icon md-svg-icon="../img/gen.svg"></md-icon></md-button>
<md-button class="md-icon-button md-primary" aria-label="自定义按钮"><md-icon md-svg-icon="../img/people.svg"></md-icon></md-button>
<md-button class="md-icon-button" ng-disabled="true" aria-label="自定义按钮"><md-icon md-svg-icon="../img/Android.svg"></md-icon></md-button>
</div>
</p>
<p>
<h1>5.自定义小按钮</h1>
<style>
.custom-btn-sm {
min-height: 2rem;
height: 2rem;
line-height: 2rem;
padding: 0 4px;
font-size: 12px;
min-width: 40px;
}
.md-button.custom-btn-bgcolor {
background-color: #009ddc;
color: #fff;
}
.md-button.custom-btn-bgcolor:not([disabled]):hover {
background-color: #ccc;
/* color:#009ddc; */
}
</style>
<div style="outline:groove #009ddc">
<md-button class="md-primary md-raised custom-btn-sm">主要按钮</md-button>
<md-button class="md-warn md-raised custom-btn-sm">警告按钮</md-button>
<md-button class="md-accent md-raised custom-btn-sm">强调按钮</md-button>
<md-button class="md-raised custom-btn-sm custom-btn-bgcolor">自定义背景色按钮</md-button>
<md-button class="md-fab md-mini custom-btn-sm custom-btn-bgcolor"><md-icon md-svg-icon="../img/Android.svg"></md-icon></md-button>
</div>
</p>
</section>
3.效果图如下
demo.png
网友评论