从大到小四种尺寸css按钮美化

不同大小CSS按钮，按钮美化，四种不同大小尺寸的表单按钮、div布局按钮，css class可以用于input、div、a、button等实现不同大小按钮布局。

css div布局不同大小按钮

一、按钮样式与代码

大型按钮 默认按钮 小型按钮 迷你按钮

大型按钮 默认按钮 小型按钮 迷你按钮

大型按钮 默认按钮 小型按钮 迷你按钮

对应代码：

<button class="layui-btn layui-btn-primary layui-btn-big">大型按钮</button>
<button class="layui-btn layui-btn-primary">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-small">小型按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-mini">迷你按钮</button>
 <br>
<button class="layui-btn layui-btn-big">大型按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-small">小型按钮</button>
<button class="layui-btn layui-btn-mini">迷你按钮</button>
<br>
<button class="layui-btn layui-btn-big layui-btn-normal">大型按钮</button>
<button class="layui-btn layui-btn-normal">默认按钮</button>
<button class="layui-btn layui-btn-small layui-btn-normal">小型按钮</button>
<button class="layui-btn layui-btn-mini layui-btn-normal">迷你按钮</button>

从上可以看见通过class实现按钮布局效果。

预设颜色：

大型百搭 正常暖色 小型警告 禁用

二、扩展用法

以上是对button按钮标签元素设置class="layui-btn"，也可以设置input、div、a等标签设置按钮效果。

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

<button class="layui-btn" style="background:#06F; color:#FFF">自定义按钮</button>

示例效果：

自定义按钮

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

三、应用方法

以上UI代码基于是layui框架，所以需要引入layui文件库，下载layui文件库后，将库文件夹“layui”整个放入项目文件夹内，html网页中引入CSS文件和js文件即可，因为代码class或id均以layui命名开头，所以不会与你现有CSS和HTML代码造成冲突。

项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。