Materialise CSS按钮 _MaterializeCSS

Materialize CSS提供了不同的CSS类, 以对按钮应用各种预定义的视觉和行为增强。让我们看看这些不同的类及其效果。

Index	Class name	Description
1)	btn	用来设置按钮或锚定为实现按钮。它还将凸起的显示效果设置为按钮。
2)	btn-floating	用于创建圆形按钮。
3)	btn-flat	默认情况下, 它用于将平面显示效果设置为按钮。
4)	btn-large	它用于创建大按钮。
5)	disabled	它用于创建禁用的按钮。
6)	类型=” 提交”	它用于将锚点或按钮表示为主按钮。
7)	waves-effect	它用于设置波纹咔嗒声效果, 可以与任何其他类组合使用。

例子 【Materialise CSS按钮】让我们以一个示例来演示使用mdl-button类来显示不同类型的按钮。

< !DOCTYPE html> < html> < head> < title> The Materialize Buttons Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < div class = "card-panel"> < h5> Raised Buttons< /h5> < button class = "btn waves-effect waves-teal"> Add< /button> < /td> < button class = "btn waves-effect waves-teal"> < i class = "material-icons left"> add< /i> Add< /button> < /td> < button class = "btn waves-effect waves-teal"> < i class = "material-icons right"> add< /i> Add< /button> < /td> < button class = "btn waves-effect waves-teal disabled"> Add< /button> < /td> < /div> < div class = "card-panel"> < h5> Flat Buttons< /h5> < button class = "btn-flat waves-effect waves-teal"> Add< /button> < /td> < button class = "btn-flat waves-effect waves-teal disabled" > < i class = "material-icons left"> add< /i> Add< /button> < /td> < /div> < div class = "card-panel"> < h5> Floating Buttons< /h5> < a class = "btn-floating waves-effect waves-light red"> < i class = "material-icons"> add< /i> < /a> < a class = "btn-floating waves-effect waves-light red disabled" > < i class = "material-icons"> add< /i> < /a> < /div> < div class = "card-panel"> < h5> Primary Buttons< /h5> < button class = "btn waves-effect waves-light red" type = "submit"> Send< i class = "material-icons right"> send< /i> < /button> < button class = "btn waves-effect waves-light red disabled" type = "submit" > Cancel< i class = "material-icons right"> cancel< /i> < /button> < /div> < div class = "card-panel"> < h5> Large Buttons< /h5> < a class = "btn-floating btn-large waves-effect waves-light red"> < i class = "material-icons"> add< /i> < /a> < a class = "btn-floating btn-large waves-effect waves-light red disabled"> < i class = "material-icons"> add< /i> < /a> < /div> < /body> < /html>

立即测试
输出