按钮
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
我是一个按钮
我诞生到世界上是这样的
每个人都在使用他
但每个人都不喜欢他默认的样子
很多人都在赋予他新的外观和意义
直到今天,从没停止……
任何赋予.hui-btn
类的页面元素都会显示方角按钮样式。通常用在<a>
和 <button>
页面元素上。追加.radius就会显示css3圆角效果。
按钮 | class="" | 描述 |
---|---|---|
hui-btn hui-btn-default |
默认按钮 | |
hui-btn hui-btn-default radius |
圆角默认按钮 | |
hui-btn hui-btn-default round |
椭圆默认按钮 | |
hui-btn hui-btn-primary radius |
提供额外的视觉感, 可在一系列的按钮中指出主要操作 | |
hui-btn hui-btn-secondary radius |
默认样式的替代样式 | |
hui-btn hui-btn-success radius |
表示成功或积极的动作 | |
hui-btn hui-btn-warning radius |
提醒应该谨慎采取这个动作 | |
hui-btn hui-btn-danger radius |
表示这个动作危险或存在危险 | |
hui-btn hui-btn-link |
简化一个按钮, 使它看起来像一个链接,同时保持按钮的行为 | |
hui-btn disabled radius |
disabled只是让状态看上去像禁用,但实际并没有真正禁用,需要js代码来禁止链接的行为 |
不支持圆角和背景渐变浏览器,如IE系列,会显示扁平纯色直角效果。
HTML
SCSS
CSS
<input class="hui-btn hui-btn-default" type="button" value="默认"> <input class="hui-btn hui-btn-default radius" type="button" value="圆角效果"> <input class="hui-btn hui-btn-default round" type="button" value="椭圆效果"> <input class="hui-btn hui-btn-primary radius" type="button" value="主要"> <input class="hui-btn hui-btn-secondary radius" type="button" value="次要"> <input class="hui-btn hui-btn-success radius" type="button" value="成功"> <input class="hui-btn radius hui-btn-warning" type="button" value="警告"> <input class="hui-btn hui-btn-danger radius" type="button" value="危险"> <input class="hui-btn hui-btn-link radius" type="button" value="链接"> <input class="hui-btn disabled radius" type="button" value="禁用">
$primary-color:#5a98de; $secondary-color:#3bb4f2; $success-color:#5eb95e; $warning-color: #f37b1d; $danger-color: #dd514c; $error-color: #c00; @mixin transition($v) { transition: $v; } @mixin boxShadow($v) { box-shadow: $v; } @mixin borderRadius($v) { -ms-border-radius: &v; border-radius: $v; } /*按钮*/ .hui-btn { display: inline-block; min-width: 32px; box-sizing: border-box; cursor: pointer; text-align: center; font-weight: 400; white-space: nowrap; vertical-align: middle; -moz-padding-start: npx; -moz-padding-end: npx; border: solid 1px #ddd; background-color: #fff; width: auto; *zoom: 1; *overflow: visible; @include transition(background-color .1s linear); &:active, &.active { background-color: #ccc; @include boxShadow(0 1px 8px rgba(0, 0, 0, 0.125) inset); } &:first-child { *margin-left: 0; } /*默认——灰色 通常用于取消*/ &.hui-btn-default { background-color: #e6e6e6; border-color: #e6e6e6; &:hover, &:focus, &:active, &.active { color: #333; background-color: #c7c7c7; border-color: #c7c7c7; } } /*主要——主色 通常用于确定、提交、购买、支付等*/ &.hui-btn-primary { color: #fff; background-color: $primary-color; border-color: $primary-color; &:hover, &:focus, &:active, &.active { color: #fff; background-color: #0a6999; border-color: #0a6999; } } /*次要按钮*/ &.hui-btn-secondary { color: #fff; background-color: $secondary-color; border-color: $secondary-color; &:hover, &:focus, &:active, &.active { color: #fff; background-color: #0f9ae0; border-color: #0f9ae0; } } /*成功*/ &.hui-btn-success { color: #fff; background-color: $success-color; border-color: $success-color; &:hover, &:focus, &:active, &.active { color: #fff; background-color: #429842; border-color: #429842; } } /*警告*/ &.hui-btn-warning { color: #fff; background-color: $warning-color; border-color: $warning-color; &:hover, &:focus, &:active, &.active { color: #fff; background-color: #c85e0b; border-color: #c85e0b } } /*危险*/ &.hui-btn-danger { color: #fff; background-color: $danger-color; border-color: $danger-color; &:hover, &:focus, &:active, &.active { color: #fff; background-color: #c62b26; border-color: #c62b26 } } /*链接*/ &.hui-btn-link { color: #0e90d2; cursor: pointer; border-color: transparent; background-color: transparent; &:hover, &:focus, &:active, &.active { color: #095f8a; text-decoration: underline; background-color: transparent; } } // 虚线 &.hui-btn-dashed { border-style: dashed; } /*块级按钮*/ &.hui-btn-block { box-sizing: border-box; display: block; padding-left: 0; padding-right: 0; width: 100%; } /* Outline buttons */ &.hui-btn-default-outline { background-color: transparent; border-color: #e6e6e6; &:hover, &:focus, &:active, &.active, &.focus { color: #333; background-color: transparent; border-color: #c7c7c7; } } &.hui-btn-primary-outline { color: $primary-color; background-color: transparent; border-color: $primary-color; &:hover, &:focus, &:active, &.active, &.focus { color: #0a6999; background-color: transparent; border-color: #0a6999; } } &.hui-btn-secondary-outline { color: $secondary-color; background-color: transparent; background-image: none; border-color: $secondary-color; &:hover, &.focus, &:active, &:focus { color: #fff; background-color: $secondary-color; border-color: $secondary-color } } &.hui-btn-success-outline { color: $success-color; background-color: transparent; background-image: none; border-color: $success-color; &:hover, &:focus, &:active, &.active, &.focus{ color: #fff; background-color: $success-color; border-color: $success-color; } } &.hui-btn-warning-outline { color: $warning-color; background-color: transparent; background-image: none; border-color: $warning-color; &:hover, &:focus, &:active, &.active, &.focus { color: #fff; background-color: $warning-color; border-color: $warning-color; } } &.hui-btn-danger-outline { color: $danger-color; background-color: transparent; background-image: none; border-color: $danger-color; &:hover, &:focus, &:active, &.active, &.focus { color: #fff; background-color: $danger-color; border-color: $danger-color; } } /*禁用状态*/ &.disabled { cursor: not-allowed; pointer-events: none; background-image: none; opacity: .65; filter: alpha(opacity=65); @include boxShadow(none); } &.hui-btn-loading { position: relative; } } a.hui-btn:hover, a.hui-btn:focus, a.hui-btn:active, a.hui-btn.active, a.hui-btn.disabled, a.hui-btn[disabled] { text-decoration: none; } .open>.hui-btn-primary-outline.hui-dropdown-toggle { color: #0a6999; background-color: transparent; border-color: #0a6999; } .open>.hui-btn-secondary-outline.hui-dropdown-toggle { color: #fff; background-color: $secondary-color; border-color: $secondary-color } .open > .hui-btn-success-outline.hui-dropdown-toggle { color: #fff; background-color: $success-color; border-color: $success-color; } .open > .hui-btn-warning-outline.hui-dropdown-toggle { color: #fff; background-color: $warning-color; border-color: $warning-color; } .open>.hui-btn-danger-outline.hui-dropdown-toggle { color: #fff; background-color: $danger-color; border-color: $danger-color; } /*表单组*/ .hui-form-group { display: inline-block; vertical-align: middle; .hui-input-text { position: relative; vertical-align: top; } .hui-btn { position: relative; margin-left: -1px; } &.radius { overflow: hidden; .hui-input-text { @include borderRadius(4px 0 0 4px); } .hui-btn { @include borderRadius(0 4px 4px 0); } } &.round { overflow: hidden; .hui-input-text { @include borderRadius(1000px 0 0 1000px); } .hui-btn { @include borderRadius(0 1000px 1000px 0); } } }
.hui-btn { display: inline-block; min-width: 32px; box-sizing: border-box; cursor: pointer; text-align: center; font-weight: 400; white-space: nowrap; vertical-align: middle; -moz-padding-start: npx; -moz-padding-end: npx; border: solid 1px #ddd; background-color: #fff; width: auto; *zoom: 1; *overflow: visible; transition: background-color 0.1s linear; /*默认——灰色 通常用于取消*/ /*主要——主色 通常用于确定、提交、购买、支付等*/ /*次要按钮*/ /*成功*/ /*警告*/ /*危险*/ /*链接*/ /*块级按钮*/ /* Outline buttons */ /*禁用状态*/ } .hui-btn:active, .hui-btn.active { background-color: #ccc; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset; } .hui-btn:first-child { *margin-left: 0; } .hui-btn.hui-btn-default { background-color: #e6e6e6; border-color: #e6e6e6; } .hui-btn.hui-btn-default:hover, .hui-btn.hui-btn-default:focus, .hui-btn.hui-btn-default:active, .hui-btn.hui-btn-default.active { color: #333; background-color: #c7c7c7; border-color: #c7c7c7; } .hui-btn.hui-btn-primary { color: #fff; background-color: #5a98de; border-color: #5a98de; } .hui-btn.hui-btn-primary:hover, .hui-btn.hui-btn-primary:focus, .hui-btn.hui-btn-primary:active, .hui-btn.hui-btn-primary.active { color: #fff; background-color: #0a6999; border-color: #0a6999; } .hui-btn.hui-btn-secondary { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2; } .hui-btn.hui-btn-secondary:hover, .hui-btn.hui-btn-secondary:focus, .hui-btn.hui-btn-secondary:active, .hui-btn.hui-btn-secondary.active { color: #fff; background-color: #0f9ae0; border-color: #0f9ae0; } .hui-btn.hui-btn-success { color: #fff; background-color: #5eb95e; border-color: #5eb95e; } .hui-btn.hui-btn-success:hover, .hui-btn.hui-btn-success:focus, .hui-btn.hui-btn-success:active, .hui-btn.hui-btn-success.active { color: #fff; background-color: #429842; border-color: #429842; } .hui-btn.hui-btn-warning { color: #fff; background-color: #f37b1d; border-color: #f37b1d; } .hui-btn.hui-btn-warning:hover, .hui-btn.hui-btn-warning:focus, .hui-btn.hui-btn-warning:active, .hui-btn.hui-btn-warning.active { color: #fff; background-color: #c85e0b; border-color: #c85e0b; } .hui-btn.hui-btn-danger { color: #fff; background-color: #dd514c; border-color: #dd514c; } .hui-btn.hui-btn-danger:hover, .hui-btn.hui-btn-danger:focus, .hui-btn.hui-btn-danger:active, .hui-btn.hui-btn-danger.active { color: #fff; background-color: #c62b26; border-color: #c62b26; } .hui-btn.hui-btn-link { color: #0e90d2; cursor: pointer; border-color: transparent; background-color: transparent; } .hui-btn.hui-btn-link:hover, .hui-btn.hui-btn-link:focus, .hui-btn.hui-btn-link:active, .hui-btn.hui-btn-link.active { color: #095f8a; text-decoration: underline; background-color: transparent; } .hui-btn.hui-btn-dashed { border-style: dashed; } .hui-btn.hui-btn-block { box-sizing: border-box; display: block; padding-left: 0; padding-right: 0; width: 100%; } .hui-btn.hui-btn-default-outline { background-color: transparent; border-color: #e6e6e6; } .hui-btn.hui-btn-default-outline:hover, .hui-btn.hui-btn-default-outline:focus, .hui-btn.hui-btn-default-outline:active, .hui-btn.hui-btn-default-outline.active, .hui-btn.hui-btn-default-outline.focus { color: #333; background-color: transparent; border-color: #c7c7c7; } .hui-btn.hui-btn-primary-outline { color: #5a98de; background-color: transparent; border-color: #5a98de; } .hui-btn.hui-btn-primary-outline:hover, .hui-btn.hui-btn-primary-outline:focus, .hui-btn.hui-btn-primary-outline:active, .hui-btn.hui-btn-primary-outline.active, .hui-btn.hui-btn-primary-outline.focus { color: #0a6999; background-color: transparent; border-color: #0a6999; } .hui-btn.hui-btn-secondary-outline { color: #3bb4f2; background-color: transparent; background-image: none; border-color: #3bb4f2; } .hui-btn.hui-btn-secondary-outline:hover, .hui-btn.hui-btn-secondary-outline.focus, .hui-btn.hui-btn-secondary-outline:active, .hui-btn.hui-btn-secondary-outline:focus { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2; } .hui-btn.hui-btn-success-outline { color: #5eb95e; background-color: transparent; background-image: none; border-color: #5eb95e; } .hui-btn.hui-btn-success-outline:hover, .hui-btn.hui-btn-success-outline:focus, .hui-btn.hui-btn-success-outline:active, .hui-btn.hui-btn-success-outline.active, .hui-btn.hui-btn-success-outline.focus { color: #fff; background-color: #5eb95e; border-color: #5eb95e; } .hui-btn.hui-btn-warning-outline { color: #f37b1d; background-color: transparent; background-image: none; border-color: #f37b1d; } .hui-btn.hui-btn-warning-outline:hover, .hui-btn.hui-btn-warning-outline:focus, .hui-btn.hui-btn-warning-outline:active, .hui-btn.hui-btn-warning-outline.active, .hui-btn.hui-btn-warning-outline.focus { color: #fff; background-color: #f37b1d; border-color: #f37b1d; } .hui-btn.hui-btn-danger-outline { color: #dd514c; background-color: transparent; background-image: none; border-color: #dd514c; } .hui-btn.hui-btn-danger-outline:hover, .hui-btn.hui-btn-danger-outline:focus, .hui-btn.hui-btn-danger-outline:active, .hui-btn.hui-btn-danger-outline.active, .hui-btn.hui-btn-danger-outline.focus { color: #fff; background-color: #dd514c; border-color: #dd514c; } .hui-btn.disabled { cursor: not-allowed; pointer-events: none; background-image: none; opacity: 0.65; filter: alpha(opacity=65); box-shadow: none; } .hui-btn.hui-btn-loading { position: relative; } a.hui-btn:hover, a.hui-btn:focus, a.hui-btn:active, a.hui-btn.active, a.hui-btn.disabled, a.hui-btn[disabled] { text-decoration: none; } .open > .hui-btn-primary-outline.hui-dropdown-toggle { color: #0a6999; background-color: transparent; border-color: #0a6999; } .open > .hui-btn-secondary-outline.hui-dropdown-toggle { color: #fff; background-color: #3bb4f2; border-color: #3bb4f2; } .open > .hui-btn-success-outline.hui-dropdown-toggle { color: #fff; background-color: #5eb95e; border-color: #5eb95e; } .open > .hui-btn-warning-outline.hui-dropdown-toggle { color: #fff; background-color: #f37b1d; border-color: #f37b1d; } .open > .hui-btn-danger-outline.hui-dropdown-toggle { color: #fff; background-color: #dd514c; border-color: #dd514c; } /*表单组*/ .hui-form-group { display: inline-block; vertical-align: middle; } .hui-form-group .hui-input-text { position: relative; vertical-align: top; } .hui-form-group .hui-btn { position: relative; margin-left: -1px; } .hui-form-group.radius { overflow: hidden; } .hui-form-group.radius .hui-input-text { border-radius: 4px 0 0 4px; } .hui-form-group.radius .hui-btn { border-radius: 0 4px 4px 0; } .hui-form-group.round { overflow: hidden; } .hui-form-group.round .hui-input-text { border-radius: 1000px 0 0 1000px; } .hui-form-group.round .hui-btn { border-radius: 0 1000px 1000px 0; }
空心效果
按钮 | class="" | 描述 |
---|---|---|
hui-btn hui-btn-primary-outline radius |
提供额外的视觉感, 可在一系列的按钮中指出主要操作 | |
hui-btn hui-btn-secondary-outline radius |
默认样式的替代样式 | |
hui-btn hui-btn-success-outline radius |
表示成功或积极的动作 | |
hui-btn hui-btn-warning-outline radius |
提醒应该谨慎采取这个动作 | |
hui-btn hui-btn-danger-outline radius |
表示这个动作危险或存在危险 | |
hui-btn hui-btn-primary-outline radius disabled |
disabled只是让状态看上去像禁用,但实际并没有真正禁用,需要js代码来禁止链接的行为 |
按钮大小
采用size-开头,尺寸是个全局类名。
按钮 | class="" |
---|---|
size-XL |
|
size-L |
|
size-M 缺省值 |
|
size-S |
|
size-MINI |
HTML
SCSS
CSS
<input class="hui-btn hui-btn-primary size-XL radius" type="button" value="特大按钮"> <input class="hui-btn hui-btn-primary size-L radius" type="button" value="大按钮"> <input class="hui-btn hui-btn-primary size-M radius" type="button" value="默认尺寸"> <input class="hui-btn hui-btn-primary size-S radius" type="button" value="小按钮"> <input class="hui-btn hui-btn-primary size-MINI radius" type="button" value="迷你按钮">