Layui-按钮 - 页面元素+图标+动画

Alexious520

已于 2024-03-25 22:38:44 修改

阅读量418

点赞数

文章标签： layui javascript 前端

于 2021-12-06 17:37:41 首次发布

本文链接：https://blog.youkuaiyun.com/Alexious520/article/details/121750781

版权

本文详细介绍了Layui框架中按钮的使用，包括基础图标、动画设置，以及不同主题、尺寸、圆角的应用。还讲解了如何创建按钮组、按钮容器，以及图标和动画的实现。同时，提到了按钮的HTML元素选择，如<a>和<button>标签，以及各种按钮属性的组合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础图标设置格式：

<div>
    <i class="layui-icon layui-icon-mike " style="color: red ; font-size: 40px"></i><!--麦克风图标-->
</div>

效果图：

基础动画设置格式：

<div>
    <i class="layui-icon layui-icon-wifi layui-anim layui-anim-rotate layui-anim-loop " style="color: blue ; font-size: 40px"></i><!--wifi图标360度循环旋转-->
    <!--个人问题：没有写layui-anim，无论用哪个动画，都必须要先声明layui-anim-->
</div>

效果图：

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

用法

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://www.layuiweb.com" class="layui-btn">一个可跳转的按钮</a>

主题

名称	组合
原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

名称	组合

最低0.47元/天解锁文章