首页>基础>按钮

按钮

文章转载，请注明出处 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="迷你按钮">

豫ICP备19019279号-1
H-ui只是一个纯web前端的程序，没有后台和数据库，也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有，造成的任何损失、不良影响，H-ui均不承担任何法律责任。
未经允许，禁止转载、抄袭、镜像
用心做站，做不一样的站