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

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

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

不同大小css按钮
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组合
大型 class="layui-btn layui-btn-big"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-small"
迷你 class="layui-btn layui-btn-mini"

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

预设颜色:

颜色 class组合
大型百搭 class="layui-btn layui-btn-big layui-btn-normal"
正常暖色 class="layui-btn layui-btn-warm"
小型警告 class="layui-btn layui-btn-small layui-btn-danger"
迷你禁用 class="layui-btn layui-btn-mini layui-btn-disabled"

二、扩展用法

以上是对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)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui-v2.0.2(531.64KB

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 不需要 此网页布局不用html引入JS库
layui教程 layui使用教程 layui教程地址
更新