首页 按钮


ul-btn
预览效果
基本按钮
禁用
加载中
镂空
流体按钮
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-title-section">基本按钮</div>
<div class="ul-section"><button class="ul-btn ul-btn-lg">默认按钮</button> <button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-mini">默认按钮</button></div>
<div class="ul-section"><button class="ul-btn ul-btn-primary ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-primary">默认按钮</button> <button class="ul-btn ul-btn-primary ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-primary ul-btn-mini">默认按钮</button></div>
<div class="ul-section"><button class="ul-btn ul-btn-success ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-success ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-success ul-btn-mini">默认按钮</button></div>
<div class="ul-section"><button class="ul-btn ul-btn-danger ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-danger">默认按钮</button> <button class="ul-btn ul-btn-danger ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-danger ul-btn-mini">默认按钮</button></div>
<div class="ul-section"><button class="ul-btn ul-btn-warning ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-warning">默认按钮</button> <button class="ul-btn ul-btn-warning ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-warning ul-btn-mini">默认按钮</button></div>
<div class="ul-section"><button class="ul-btn ul-btn-info ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-info">默认按钮</button> <button class="ul-btn ul-btn-info ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-info ul-btn-mini">默认按钮</button></div>
<div class="ul-title-section">禁用</div>
<div class="ul-section"><button class="ul-btn disabled">默认按钮</button> <button class="ul-btn ul-btn-primary disabled">默认按钮</button> <button class="ul-btn ul-btn-success disabled">默认按钮</button> <button class="ul-btn ul-btn-danger disabled">默认按钮</button> <button class="ul-btn ul-btn-warning disabled">默认按钮</button> <button class="ul-btn ul-btn-info disabled">默认按钮</button></div>
<div class="ul-title-section">加载中</div>
<div class="ul-section"><button class="ul-btn loading">默认按钮</button> <button class="ul-btn ul-btn-primary loading">默认按钮</button> <button class="ul-btn ul-btn-success loading">默认按钮</button> <button class="ul-btn ul-btn-danger loading">默认按钮</button> <button class="ul-btn ul-btn-warning loading">默认按钮</button> <button class="ul-btn ul-btn-info loading">默认按钮</button></div>
<div class="ul-title-section">镂空</div>
<div class="ul-section"><button class="ul-btn plain">默认按钮</button> <button class="ul-btn ul-btn-primary plain">默认按钮</button> <button class="ul-btn ul-btn-success plain">默认按钮</button> <button class="ul-btn ul-btn-danger plain">默认按钮</button> <button class="ul-btn ul-btn-warning plain">默认按钮</button> <button class="ul-btn ul-btn-info plain">默认按钮</button></div>
<div class="ul-title-section">流体按钮</div>
<div class="ul-section"><button class="ul-btn fluid">默认按钮</button> <button class="ul-btn ul-btn-primary fluid">默认按钮</button> <button class="ul-btn ul-btn-success fluid">默认按钮</button> <button class="ul-btn ul-btn-danger fluid">默认按钮</button> <button class="ul-btn ul-btn-warning fluid">默认按钮</button> <button class="ul-btn ul-btn-info fluid">默认按钮</button></div>
.ul-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 $space-md;
  background-color: $color-white;
  color: $color-text;
  white-space: nowrap;
  text-align: center;
  font-size: $font-size-base;
  border: 1px solid $color-border;
  border-radius: $radius-base;
  cursor: pointer;
  transition: all .3s;
  -webkit-transition: all .3s;
  position: relative;
  user-select: none;

  margin-right: $space-base;
  margin-bottom: $space-base;

  &:hover {
    opacity: 0.8;
  }


  &.disabled,
  &:disabled {
    opacity: 0.65;
    cursor: not-allowed;

  }

  &.loading {
    cursor: wait;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(90deg,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0.2) 20%,
          rgba(255, 255, 255, 0.5) 60%,
          rgba(255, 255, 255, 0));
      transform: translateX(-100%);
      animation: ul-btn-shine 2s infinite;
    }

    >span {
      visibility: hidden;
    }
  }

  &-mini {
    height: 24px;
    line-height: 24px;
    padding: 0 $space-sm;
    font-size: $font-size-xs;
  }

  &-sm {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    font-size: $font-size-sm;
  }

  &-lg {
    height: 44px;
    line-height: 44px;
    padding: 0 $space-lg;
    font-size: $font-size-lg;
  }

  &.fluid {
    width: calc(100% - #{$space-md} * 2);
    display: block;
    margin-right: 0;
    margin-left: 0;
  }

  @each $name,
  $value in $theme-color-variants {
    $main-color: map-get($value, "base");
    $text-color: map-get($value, "text");

    &-#{$name} {
      background-color: $main-color;
      border-color: $main-color;
      color: $text-color;

      &.plain {
        color: $main-color;
        background-color: transparent;
        border-color: $main-color;

        &:hover {
          background-color: $main-color;
          color: $text-color;
        }
      }
    }
  }
}

@keyframes ul-btn-shine {
  100% {
    transform: translateX(100%);
  }
}
.ul-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
  background-color: var(--ul-color-white);
  color: var(--ul-color-text);
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: 1px solid var(--ul-color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  position: relative;
  user-select: none;
  margin-right: 4px;
  margin-bottom: 4px;
}
.ul-btn:hover {
  opacity: 0.8;
}
.ul-btn.disabled, .ul-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.ul-btn.loading {
  cursor: wait;
  overflow: hidden;
}
.ul-btn.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  transform: translateX(-100%);
  animation: ul-btn-shine 2s infinite;
}
.ul-btn.loading > span {
  visibility: hidden;
}
.ul-btn-mini {
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 10px;
}
.ul-btn-sm {
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}
.ul-btn-lg {
  height: 44px;
  line-height: 44px;
  padding: 0 24px;
  font-size: 16px;
}
.ul-btn.fluid {
  width: calc(100% - 16px * 2);
  display: block;
  margin-right: 0;
  margin-left: 0;
}
.ul-btn-primary {
  background-color: var(--ul-color-primary-base);
  border-color: var(--ul-color-primary-base);
  color: var(--ul-color-primary-text);
}
.ul-btn-primary.plain {
  color: var(--ul-color-primary-base);
  background-color: transparent;
  border-color: var(--ul-color-primary-base);
}
.ul-btn-primary.plain:hover {
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-primary-text);
}
.ul-btn-success {
  background-color: var(--ul-color-success-base);
  border-color: var(--ul-color-success-base);
  color: var(--ul-color-success-text);
}
.ul-btn-success.plain {
  color: var(--ul-color-success-base);
  background-color: transparent;
  border-color: var(--ul-color-success-base);
}
.ul-btn-success.plain:hover {
  background-color: var(--ul-color-success-base);
  color: var(--ul-color-success-text);
}
.ul-btn-danger {
  background-color: var(--ul-color-danger-base);
  border-color: var(--ul-color-danger-base);
  color: var(--ul-color-danger-text);
}
.ul-btn-danger.plain {
  color: var(--ul-color-danger-base);
  background-color: transparent;
  border-color: var(--ul-color-danger-base);
}
.ul-btn-danger.plain:hover {
  background-color: var(--ul-color-danger-base);
  color: var(--ul-color-danger-text);
}
.ul-btn-warning {
  background-color: var(--ul-color-warning-base);
  border-color: var(--ul-color-warning-base);
  color: var(--ul-color-warning-text);
}
.ul-btn-warning.plain {
  color: var(--ul-color-warning-base);
  background-color: transparent;
  border-color: var(--ul-color-warning-base);
}
.ul-btn-warning.plain:hover {
  background-color: var(--ul-color-warning-base);
  color: var(--ul-color-warning-text);
}
.ul-btn-info {
  background-color: var(--ul-color-info-base);
  border-color: var(--ul-color-info-base);
  color: var(--ul-color-info-text);
}
.ul-btn-info.plain {
  color: var(--ul-color-info-base);
  background-color: transparent;
  border-color: var(--ul-color-info-base);
}
.ul-btn-info.plain:hover {
  background-color: var(--ul-color-info-base);
  color: var(--ul-color-info-text);
}
.ul-btn-dark {
  background-color: var(--ul-color-dark-base);
  border-color: var(--ul-color-dark-base);
  color: var(--ul-color-dark-text);
}
.ul-btn-dark.plain {
  color: var(--ul-color-dark-base);
  background-color: transparent;
  border-color: var(--ul-color-dark-base);
}
.ul-btn-dark.plain:hover {
  background-color: var(--ul-color-dark-base);
  color: var(--ul-color-dark-text);
}
.ul-btn-light {
  background-color: var(--ul-color-light-base);
  border-color: var(--ul-color-light-base);
  color: var(--ul-color-light-text);
}
.ul-btn-light.plain {
  color: var(--ul-color-light-base);
  background-color: transparent;
  border-color: var(--ul-color-light-base);
}
.ul-btn-light.plain:hover {
  background-color: var(--ul-color-light-base);
  color: var(--ul-color-light-text);
}
.ul-btn-gray {
  background-color: var(--ul-color-gray-base);
  border-color: var(--ul-color-gray-base);
  color: var(--ul-color-gray-text);
}
.ul-btn-gray.plain {
  color: var(--ul-color-gray-base);
  background-color: transparent;
  border-color: var(--ul-color-gray-base);
}
.ul-btn-gray.plain:hover {
  background-color: var(--ul-color-gray-base);
  color: var(--ul-color-gray-text);
}
@keyframes ul-btn-shine {
  100% {
    transform: translateX(100%);
  }
}

<view class="ul-title-section">基本按钮</view>
<view class="ul-section"><button class="ul-btn ul-btn-lg">默认按钮</button> <button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-mini">默认按钮</button></view>
<view class="ul-section"><button class="ul-btn ul-btn-primary ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-primary">默认按钮</button> <button class="ul-btn ul-btn-primary ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-primary ul-btn-mini">默认按钮</button></view>
<view class="ul-section"><button class="ul-btn ul-btn-success ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-success ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-success ul-btn-mini">默认按钮</button></view>
<view class="ul-section"><button class="ul-btn ul-btn-danger ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-danger">默认按钮</button> <button class="ul-btn ul-btn-danger ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-danger ul-btn-mini">默认按钮</button></view>
<view class="ul-section"><button class="ul-btn ul-btn-warning ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-warning">默认按钮</button> <button class="ul-btn ul-btn-warning ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-warning ul-btn-mini">默认按钮</button></view>
<view class="ul-section"><button class="ul-btn ul-btn-info ul-btn-lg">默认按钮</button> <button class="ul-btn ul-btn-info">默认按钮</button> <button class="ul-btn ul-btn-info ul-btn-sm">默认按钮</button> <button class="ul-btn ul-btn-info ul-btn-mini">默认按钮</button></view>
<view class="ul-title-section">禁用</view>
<view class="ul-section"><button class="ul-btn disabled">默认按钮</button> <button class="ul-btn ul-btn-primary disabled">默认按钮</button> <button class="ul-btn ul-btn-success disabled">默认按钮</button> <button class="ul-btn ul-btn-danger disabled">默认按钮</button> <button class="ul-btn ul-btn-warning disabled">默认按钮</button> <button class="ul-btn ul-btn-info disabled">默认按钮</button></view>
<view class="ul-title-section">加载中</view>
<view class="ul-section"><button class="ul-btn loading">默认按钮</button> <button class="ul-btn ul-btn-primary loading">默认按钮</button> <button class="ul-btn ul-btn-success loading">默认按钮</button> <button class="ul-btn ul-btn-danger loading">默认按钮</button> <button class="ul-btn ul-btn-warning loading">默认按钮</button> <button class="ul-btn ul-btn-info loading">默认按钮</button></view>
<view class="ul-title-section">镂空</view>
<view class="ul-section"><button class="ul-btn plain">默认按钮</button> <button class="ul-btn ul-btn-primary plain">默认按钮</button> <button class="ul-btn ul-btn-success plain">默认按钮</button> <button class="ul-btn ul-btn-danger plain">默认按钮</button> <button class="ul-btn ul-btn-warning plain">默认按钮</button> <button class="ul-btn ul-btn-info plain">默认按钮</button></view>
<view class="ul-title-section">流体按钮</view>
<view class="ul-section"><button class="ul-btn fluid">默认按钮</button> <button class="ul-btn ul-btn-primary fluid">默认按钮</button> <button class="ul-btn ul-btn-success fluid">默认按钮</button> <button class="ul-btn ul-btn-danger fluid">默认按钮</button> <button class="ul-btn ul-btn-warning fluid">默认按钮</button> <button class="ul-btn ul-btn-info fluid">默认按钮</button></view>
按钮容器
预览效果
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-btn-container"><button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-primary">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-danger">默认按钮</button> <button class="ul-btn ul-btn-warning">默认按钮</button> <button class="ul-btn ul-btn-info">默认按钮</button> <button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-primary">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-danger">默认按钮</button> <button class="ul-btn ul-btn-warning">默认按钮</button> <button class="ul-btn ul-btn-info">默认按钮</button></div>
.ul-btn-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ul-btn-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<view class="ul-btn-container"><button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-primary">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-danger">默认按钮</button> <button class="ul-btn ul-btn-warning">默认按钮</button> <button class="ul-btn ul-btn-info">默认按钮</button> <button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-primary">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-danger">默认按钮</button> <button class="ul-btn ul-btn-warning">默认按钮</button> <button class="ul-btn ul-btn-info">默认按钮</button></view>

让一群按钮安全的换行，不产生混乱的空隙。

按钮组
预览效果
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-btn-group"><button class="ul-btn">默认按钮</button> <button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button></div>
<div class="ul-btn-group"><button class="ul-btn ul-btn-success plain">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-success plain">默认按钮</button></div>
<div class="ul-btn-group"><button class="ul-btn ul-btn-danger ul-btn-mini">默认按钮</button> <button class="ul-btn ul-btn-primary ul-btn-mini">默认按钮</button> <button class="ul-btn ul-btn-danger ul-btn-mini">默认按钮</button></div>
.ul-btn-group {
    display: inline-flex;
    vertical-align: middle;
    margin-right: $space-md;

    .ul-btn {
        position: relative;
        margin: 0;
        border-radius: 0;

        &:first-child {
            margin-left: 0;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }

        &:last-child {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }

        &:hover,
        &:focus {
            z-index: 1;
        }
    }

}
.ul-btn-group {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 16px;
}
.ul-btn-group .ul-btn {
  position: relative;
  margin: 0;
  border-radius: 0;
}
.ul-btn-group .ul-btn:first-child {
  margin-left: 0;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.ul-btn-group .ul-btn:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.ul-btn-group .ul-btn:hover, .ul-btn-group .ul-btn:focus {
  z-index: 1;
}

<view class="ul-btn-group"><button class="ul-btn">默认按钮</button> <button class="ul-btn">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button></view>
<view class="ul-btn-group"><button class="ul-btn ul-btn-success plain">默认按钮</button> <button class="ul-btn ul-btn-success">默认按钮</button> <button class="ul-btn ul-btn-success plain">默认按钮</button></view>
<view class="ul-btn-group"><button class="ul-btn ul-btn-danger ul-btn-mini">默认按钮</button> <button class="ul-btn ul-btn-primary ul-btn-mini">默认按钮</button> <button class="ul-btn ul-btn-danger ul-btn-mini">默认按钮</button></view>

可以实现一种单选的感觉。