<div class="demo-preview-block"> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button">Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised">Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab"><i class="material-icons">add</i></button></div> <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">create</i></button></div> <h5>With Ripples</h5> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"><i class="material-icons">add</i></button></div> <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">create</i></button></div> <h5>.mdl-button--colored</h5> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-button--colored">Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><i class="material-icons">add</i></button></div> <h5>With Ripples</h5> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"><i class="material-icons">add</i></button></div> <h5>.mdl-button--primary</h5> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--primary"><i class="material-icons">add</i></button></div> <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--primary"><i class="material-icons">mood</i></button></div> <h5>.mdl-button--accent</h5> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">add</i></button></div> <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">mood</i></button></div> <h5>.mdl-button--mini-fab</h5> <div class="demo-button"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab mdl-js-ripple-effect"><i class="material-icons">add</i></button></div> <h5>Disabled</h5> <div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect" disabled>Flat</button></div> <div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised</button></div> <div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" disabled><i class="material-icons">add</i></button></div> <div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" disabled><i class="material-icons">add</i></button></div> </div>