weseek__growi/packages/app/src/styles/atoms/_buttons.scss

.btn.btn-like {
  @include button-outline-variant($secondary, lighten($info, 15%), rgba(lighten($info, 10%), 0.15), rgba(lighten($info, 10%), 0.5));
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: lighten($info, 15%);
  }
  &:not(:disabled):not(.disabled):not(:hover) {
    background-color: transparent;
  }
}

.btn.btn-bookmark {
  @include button-outline-variant($secondary, $warning, rgba(lighten($warning, 20%), 0.5), rgba(lighten($warning, 20%), 0.5));
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $warning;
  }
  &:not(:disabled):not(.disabled):not(:hover) {
    background-color: transparent;
  }
}

.btn-copy,
.btn-edit {
  opacity: 0.3;
}

.btn-edit-tags {
  opacity: 0.5;

  &.no-tags {
    opacity: 0.7;
  }
}

.rounded-pill-weak {
  border-radius: 60px;
}

// fill button style
:root .btn.btn-fill {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-width: 130px;
  padding: 0px;
  overflow: hidden;
  color: white;
  text-align: center;
  cursor: pointer;
  background-color: rgba(lighten(black, 15%), 0.5);
  border: none;

  .btn-label {
    position: relative;
    z-index: 1;
    padding: 9px 15px;
    color: white;
    text-decoration: none;
  }

  .btn-label-text {
    position: relative;
    z-index: 1;
    margin: auto;
    color: white;
    text-align: center;
    text-decoration: none;
  }

  // effect
  .eff {
    position: absolute;
    top: -50px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
  }

  &:hover {
    .eff {
      top: 0;
    }
  }
}

// Page Management Dropdown icon
.grw-btn-page-management {
  background-color: transparent;
  transition: 0.3s;
}

// define disabled button w/o pointer-events, see _override-bootstrap.scss
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  &.grw-pointer-events-none {
    pointer-events: none;
  }
}