一直非常喜欢Bootstrap的按钮风格，仿照Bootstrap做了一套按钮。在ie6/7/8/9/10/11、chrome、firefox下能正常使用。

ie6/7/8不支持css3的样式。按钮在这些模式下没有圆角效果。在ie6/7下使用button标签能显示正常效果，使用其它标签存在文字偏移和背景显示不完整。

按钮支持div/span/input/button等元素，大小分为rhui-btn-large、rhui-btn、rhui-btn-small和rhui-btn-min四个级别，效果例如以下

所有代码

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>仿Bootstrap按钮</title>

	<style type="text/css">

		.rhui-btn {

			display: inline-block;

			margin: 0;

			padding: 0 20px;

			outline-style: none;

			border: 1px solid #ccc;

			border-radius: 4px;

			background-color: #fff;

			background-image: none;

			color: #333;

			vertical-align: middle;

			text-align: center;

			text-decoration: none;

			white-space: nowrap;

			font-size: 12px;

			line-height: 25px;

			cursor: pointer;

			/* ie6/ie7 inline-block hack */

			*zoom: 1;

			*display: inline;

		}

		.rhui-btn:hover {

			border-color: #adadad;

			background-color: #e6e6e6;

		}

		.rhui-btn-large {

			padding: 0 30px;

			font-weight: 700;

			font-size: 16px;

			line-height: 30px;

		}

		.rhui-btn-small {

			padding: 0 15px;

			line-height: 21px;

		}

		.rhui-btn-min {

			padding: 0 10px;

			line-height: 18px;

		}

		.rhui-btn-primary {

			border-color: #2e6da4;

			background-color: #337ab7;

			color: #fff;

		}

		.rhui-btn-primary:hover {

			border-color: #204d74;

			background-color: #286090;

		}

		.rhui-btn-success {

			border-color: #4cae4c;

			background-color: #5cb85c;

			color: #fff;

		}

		.rhui-btn-success:hover {

			border-color: #398439;

			background-color: #449d44;

			color: #fff;

		}

		.rhui-btn-info {

			border-color: #46b8da;

			background-color: #5bc0de;

			color: #fff;

		}

		.rhui-btn-info:hover {

			border-color: #269abc;

			background-color: #31b0d5;

		}

		.rhui-btn-warning {

			border-color: #eea236;

			background-color: #f0ad4e;

			color: #fff;

		}

		.rhui-btn-warning:hover {

			border-color: #d58512;

			background-color: #ec971f;

		}

		.rhui-btn-danger {

			border-color: #d43f3a;

			background-color: #d9534f;

			color: #fff;

		}

		.rhui-btn-danger:hover {

			border-color: #ac2925;

			background-color: #c9302c;

		}

	</style>

</head>

<body>

	<div style="margin: 20px;">

		<div class="rhui-btn rhui-btn-large">默认样式</div>

		<a class="rhui-btn rhui-btn-large rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-large rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-large rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-large rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-large rhui-btn-danger">危急</button>

	</div>

	<div style="margin: 20px;">

		<div class="rhui-btn">默认样式</div>

		<a class="rhui-btn rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-danger">危急</button>

	</div>

	<div style="margin: 20px;">

		<div class="rhui-btn rhui-btn-small">默认样式</div>

		<a class="rhui-btn rhui-btn-small rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-small rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-small rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-small rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-small rhui-btn-danger">危急</button>

	</div>

	<div style="margin: 20px;">

		<div class="rhui-btn rhui-btn-min">默认样式</div>

		<a class="rhui-btn rhui-btn-min rhui-btn-primary" href="#">首选项</a>

		<input type="button" class="rhui-btn rhui-btn-min rhui-btn-success" value="成功" />

		<span class="rhui-btn rhui-btn-small rhui-btn-info">一般信息</span>

		<button class="rhui-btn rhui-btn-min rhui-btn-warning">警告</button>

		<button class="rhui-btn rhui-btn-min rhui-btn-danger">危急</button>

	</div>

</body>

</html>

Bootstrap风格button的更多相关文章

  1. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  2. 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap

    受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...

  3. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  4. 【ztree系列——图标的修改】Bootstrap风格的ztree

    前段时间项目中需要用树形结构,在选取的时候参考了很多插件,经过很多尝试,最后又回归到了ztree上.以前用的界面框架是EasyUI,但是它的树结构在实现起来有点复杂,并且功能不是特别完善.dtree在 ...

  5. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

  6. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  7. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  8. jQuery分页插件jBootstrapPage，一个Bootstrap风格的分页插件

    一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善 ...

  9. 将markdown格式转化为bootstrap风格html

    前言:这些年markdown格式的文件很流行,像github里project说明文档都是用markdown格式编写. 一方面,我们能够通过pandoc将markdown文件转换为html,这样将htm ...

随机推荐

  1. [POJ1655]Balancing Act

    思路:DP求树的重心.对于每个结点$i$,$d_i=\displaystyle{\sum_{j\in s(i)}}d_j+1$.删去这个点能得到的最大子树大小即为$\max(\max\limits_{ ...

  2. 再谈JavaScript中的闭包

    一.什么是闭包 闭包就是有权访问另一个函数作用域中变量的函数,因此,闭包的本质是一个函数.当一个内部函数被保存到外部时,就会生成闭包. 二.闭包的作用 1.实现公有变量,即通过局部变量实现全局变量的效 ...

  3. CRM上线之路 走上了CRM实施顾问-第12天上班 -第三周

    今天是周五,<CRM初期需求说明>是经理们商讨的,总共2张纸,根据两次会议,我写了<CRM需求说明>总共18面. 这是这周的工作汇报,其实,报告是我一天内写出来的,中午饭都没吃 ...

  4. UVA 303 Pipe

    点击打开链接 题意: 求光线能达到的最大横坐标 注意光线可以和管道重合 也可以经过转折点 解法: 枚举每种光线是否能通过每个转折点的截面(线段)即可 //大白p263 #include <cma ...

  5. [Git]git教程

    摘要 目前公司项目逐渐都要迁移到git上,使用git进行版本控制及源代码管理. git学习资料 一个小时学会Git 权威Git书籍ProGit(中文版) git官网:http://git-scm.co ...

  6. DevExpress VCL for Delphi 各版本收集下载

    更多VCL组件请到:http://maxwoods.400gb.com/u/758954/1974711 DevExpress VCL 5.7:http://www.ctdisk.com/file/7 ...

  7. C#编程（十八）----------C#中的结构

    C#中的结构 假设有一个类: class Dimensions { public double Length; public double Width; } 定义了一个类,它只存储某一项的长度和宽度. ...

  8. EBS已安装模块

    /* Formatted on 2018/3/15 11:14:51 (QP5 v5.256.13226.35538) */ SELECT fa.application_short_name , fp ...

  9. ZooKeeper_客户端工具zkCli.sh使用

    #一.命令 [root@VM_31_182_centos bin]# ./zkCli.sh -server 127.0.0.1:2181   #二.帮助命令 help #三.创建.修改.删除.退出de ...

  10. ASP.NET MVC：模块化/插件式文章汇总

    方案 Shazwazza | Developing a plugin framework in ASP.NET MVC with medium trust 基于ASP.NET MVC3 Razor的模 ...