html css圆角按钮,css不同大小圆角按钮 css不同颜色圆角按钮

无法在这个位置找到： /templets/default/think201610/bodys.htm

div css不同大小尺寸圆角案例，css不同颜色的圆角按钮资源代码，可用于div圆角按钮效果、input圆角按钮、button圆角按钮、a超链接圆角按钮效果样式代码框架资源。

不同颜色大小的圆角按钮效果截图

一、圆角按钮在线样式效果与代码

不同颜色圆角按钮在线效果

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

不同颜色圆角按钮代码

原始按钮

默认按钮

百搭按钮

暖色按钮

警告按钮

禁用按钮

圆角对应class代码说明：

主题

class组合

原始

class="layui-btn layui-btn-radius layui-btn-primary"

默认

class="layui-btn layui-btn-radius"

百搭

class="layui-btn layui-btn-radius layui-btn-normal"

暖色

class="layui-btn layui-btn-radius layui-btn-warm"

警告

class="layui-btn layui-btn-radius layui-btn-danger"

禁用

class="layui-btn layui-btn-radius layui-btn-disabled"

不同大小颜色圆角按钮在线效果

大型百搭 小型警告 迷你禁用

不同大小颜色圆角按钮代码

大型百搭

小型警告

迷你禁用

对应按钮设置class代码说明：

尺寸

class组合

大型百搭

class="layui-btn layui-btn-big layui-btn-radius layui-btn-normal"

小型警告

class="layui-btn layui-btn-small layui-btn-radius layui-btn-danger"

迷你禁用

class="layui-btn layui-btn-mini layui-btn-radius layui-btn-disabled"

二、按钮颜色自定义

背景和字体颜色自定义改变：

自定义按钮

示例效果：

自定义按钮

通过style自适应设置需要CSS样式。

三、使用方法

以上效果各种漂亮美化的按钮基于layui前端框架的，所以使用需要引入layui CSS库。

项目使用步骤：

1、下载layui压缩包；

2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；

3、html引入layui.css(注意路径正确)；

4、拷贝需要效果HTML代码(和JS)即可完成使用应用。

项目

操作

备注

引入CSS

需要

引入JS

不需要

此网页布局不用html引入JS库

layui教程

layui使用教程

无法在这个位置找到： /templets/default/think201610/bodydown.htm