按钮组

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

左边按钮中间按钮中间按钮右边按钮



   

     

  

  

HTML SCSS CSS

<div class="hui-btn-group">
  <span class="hui-btn hui-btn-primary radius">左边按钮</span>
  <span class="hui-btn hui-btn-default radius">中间按钮</span>
  <span class="hui-btn hui-btn-default radius">中间按钮</span>
  <span class="hui-btn hui-btn-default radius">右边按钮</span>
</div>

.hui-btn-group {
  font-size: 0;
  .hui-btn {
    margin-left: -1px;
  }
  .hui-btn:not(:first-child):not(:last-child):not(.hui-dropdown-toggle) {
    @include borderRadius(0);
  }
  >.hui-btn:first-child:not(:last-child):not(.hui-dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  >.hui-btn:last-child:not(:first-child),
  >.hui-dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}

.hui-btn-group {
  font-size: 0;
}
.hui-btn-group .hui-btn {
  margin-left: -1px;
}
.hui-btn-group .hui-btn:not(:first-child):not(:last-child):not(.hui-dropdown-toggle) {
  border-radius: 0;
}
.hui-btn-group > .hui-btn:first-child:not(:last-child):not(.hui-dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.hui-btn-group > .hui-btn:last-child:not(:first-child),
.hui-btn-group > .hui-dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}