Google MDL BUTTON

MDL Button

官方说明地址

效果:

基础说明:

MDL中的Button是直接使用的HTML5中的Button

它带有几个效果

扁平(默认)

立体(Raised)

圆形(Fab)

颜色

Ripple效果

Class说明

基础: mdl-button mdl-js-button * (必须)

Raised效果: mdl-button–raised, 启用颜色时必须

圆形(Fab): mdl-button–fab, mdl-button–mini-fab(尺寸小点)

颜色: mdl-button–colored, 它会根据按钮类型自动分配颜色

主,次颜色: mdl-button–primary, mdl-button–accent

Ripple效果: mdl-js-ripple-effect

测试代码

<button>正常Button</button>
<button class="mdl-button">MDL Button</button>
<button class="mdl-button mdl-js-button mdl-button--raised">Raised Button</button>
<button class="mdl-button mdl-js-button mdl-button--fab">OK</button>
<button class="mdl-button mdl-js-button mdl-button--fab  mdl-button--raised mdl-button--colored mdl-js-ripple-effect">OK</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Colored Button</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Colored Button</button>
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>
<button class="mdl-button mdl-js-button mdl-button--primary mdl-js-ripple-effect">Ripple Button</button>