分类目录 共计收录4183站; 资讯文章4607篇; 待审网站 1018站; 当月收录23站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

多种不同的按钮样式

按钮

我是一个按钮X7F网站目录

我诞生到世界上是这样的 X7F网站目录

每个人都在使用他X7F网站目录

但每个人都不喜欢他默认的样子X7F网站目录

很多人都在赋予他新的外观和意义X7F网站目录

直到今天,从没停止……X7F网站目录

 X7F网站目录

任何赋予.btn类的页面元素都会显示方角按钮样式。通常用在<a> 和 <button> 页面元素上。追加.radius就会显示css3圆角效果。X7F网站目录

按钮class=""描述
btn btn-default默认按钮
btn btn-default radius圆角默认按钮
btn btn-default round椭圆默认按钮
btn btn-primary radius提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-secondary radius默认样式的替代样式
btn btn-success radius表示成功或积极的动作
btn btn-warning radius提醒应该谨慎采取这个动作
btn btn-danger radius表示这个动作危险或存在危险
btn btn-link简化一个按钮, 使它看起来像一个链接,同时保持按钮的行为
btn disabled radiusdisabled只是让状态看上去像禁用,但实际并没有真正禁用,需要js代码来禁止链接的行为

X7F网站目录

不支持圆角和背景渐变浏览器,如IE系列,会显示扁平纯色直角效果。X7F网站目录

HTML代码

<input class="btn btn-default" type="button" value="默认">
<input class="btn btn-default radius" type="button" value="圆角效果">
<input class="btn btn-default round" type="button" value="椭圆效果">
<input class="btn btn-primary radius" type="button" value="主要">
<input class="btn radius btn-secondary" type="button" value="次要">
<input class="btn btn-success radius" type="button" value="成功">
<input class="btn radius btn-warning" type="button" value="警告">
<input class="btn btn-danger radius" type="button" value="危险">
<input class="btn btn-link radius" type="button" value="链接">
<input class="btn disabled radius" type="button" value="禁用">

按钮大小

2.0 重新定义尺寸的命名,采用size-开通,尺寸是个全局类名。X7F网站目录

按钮class=""
size-XL
size-L
size-M 缺省值
size-S
size-MINI

HTML代码

<input class="btn btn-primary size-XL radius" type="button" value="特大按钮">
<input class="btn btn-primary size-L radius" type="button" value="大按钮">
<input class="btn btn-primary size-M radius" type="button" value="默认尺寸">
<input class="btn btn-primary size-S radius" type="button" value="小按钮">
<input class="btn btn-primary size-MINI radius" type="button" value="迷你按钮">

CSS代码

/*按钮*/X7F网站目录

.btn{display:inline-block;cursor:pointer;text-align:center; font-weight:400;white-space:nowrap;vertical-align: middle;*zoom:1;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;-o-transition:background-color .1s linear;transition:background-color .1s linear;}X7F网站目录

a.btn:hover,a.btn:focus,a.btn:active,a.btn.active,a.btn.disabled,a.btn[disabled]{text-decoration:none}X7F网站目录

.btn:active,.btn.active{background-color:#ccc}X7F网站目录

.btn:first-child{*margin-left:0}X7F网站目录

.btn.active,.btn:active{-moz-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset;-webkit-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset;}X7F网站目录

 X7F网站目录

/*默认——灰色 通常用于取消*/X7F网站目录

.btn-default{background-color:#e6e6e6}X7F网站目录

.btn-default:hover,X7F网站目录

.btn-default:focus,X7F网站目录

.btn-default:active,X7F网站目录

.btn-default.active{color:#333;background-color:#c7c7c7;border-color:#c7c7c7}X7F网站目录

 X7F网站目录

/*主要——主色 通常用于确定、提交、购买、支付等*/X7F网站目录

.btn-primary{color:#fff;background-color:#5a98de; border-color:#5a98de}X7F网站目录

.btn-primary:hover,X7F网站目录

.btn-primary:focus,X7F网站目录

.btn-primary:active,X7F网站目录

.btn-primary.active{color:#fff;background-color:#6aa2e0;border-color:#6aa2e0}X7F网站目录

 X7F网站目录

/*次要按钮*/X7F网站目录

.btn-secondary{color:#fff;background-color:#3bb4f2; border-color:#3bb4f2}X7F网站目录

.btn-secondary:hover,X7F网站目录

.btn-secondary:focus,X7F网站目录

.btn-secondary:active,X7F网站目录

.btn-secondary.active{color:#fff;background-color:#0f9ae0;border-color:#0f9ae0}X7F网站目录

 X7F网站目录

/*成功*/X7F网站目录

.btn-success{color:#fff;background-color:#5eb95e; border-color:#5eb95e}X7F网站目录

.btn-success:hover,X7F网站目录

.btn-success:focus,X7F网站目录

.btn-success:active,X7F网站目录

.btn-success.active{color:#fff;background-color:#429842;border-color:#429842}X7F网站目录

 X7F网站目录

/*警告*/X7F网站目录

.btn-warning{color:#fff;background-color:#f37b1d; border-color:#f37b1d}X7F网站目录

.btn-warning:hover,X7F网站目录

.btn-warning:focus,X7F网站目录

.btn-warning:active,X7F网站目录

.btn-warning.active{color:#fff;background-color:#c85e0b;border-color:#c85e0b}X7F网站目录

 X7F网站目录

/*危险*/X7F网站目录

.btn-danger{color:#fff;background-color:#dd514c; border-color:#dd514c}X7F网站目录

.btn-danger:hover,X7F网站目录

.btn-danger:focus,X7F网站目录

.btn-danger:active,X7F网站目录

.btn-danger.active{color:#fff;background-color:#c62b26;border-color:#c62b26}X7F网站目录

 X7F网站目录

/*链接*/X7F网站目录

.btn-link{color:#0e90d2;cursor:pointer;border-color:transparent;background-color:transparent;}X7F网站目录

.btn-link:hover,X7F网站目录

.btn-link:focus,X7F网站目录

.btn-link:active,X7F网站目录

.btn-link.active{color:#095f8a;text-decoration:underline;background-color:transparent}X7F网站目录

 X7F网站目录

/*禁用状态*/X7F网站目录

.btn.disabled{cursor:not-allowed;background-image:none;opacity:.65;filter:alpha(opacity=65);box-shadow:none; pointer-events:none;}X7F网站目录


X7F网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->