hubl/src/styles/hubl-framework/buttons/_index.scss

button,
.button,
input[type='submit'],
a {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0;

  form {
    display: inline-block;
  }

  &.button {
    padding: 7.5px 20px;
    border-radius: 16.5px;

    &.rounded {
      border-radius: 50%;
      font-size: 18px;
      padding: 2px;
      height: 29px;
      width: 29px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &.icon::before {
      font-size: 15px;
      margin-right: 6px;
    }
    &-semibold {
      *,
      & {
        font-weight: 600;
      }
    }
    &-bold {
      *,
      & {
        font-weight: 700;
      }
    }
    &-uppercase {
      *,
      & {
        text-transform: uppercase;
      }
    }
    &.color-primary {
      background-color: white;
      *,
      & {
        color: var(--color-primary);
      }
      &.bordered {
        border: 1px solid var(--color-primary);
      }
      &:hover {
        background-color: var(--color-primary);

        *,
        & {
          color: white;
        }
      }
    }
    &.color-secondary {
      background-color: white;

      *,
      & {
        color: var(--color-secondary);
      }
      &.bordered {
        border: 1px solid var(--color-secondary);
      }
      &:hover {
        background-color: var(--color-secondary);
        color: white;

        *,
        & {
          color: white;
        }
      }
    }
    &.color-third {
      color: var(--color-third);
      background-color:white;

      *,
      & {
        color: var(--color-third);
      }
      &.bordered {
        border: 1px solid var(--color-third);
      }
      &:hover {
        background-color: var(--color-third);

        *,
        & {
          color: white;
        }
      }
    }
    &.color-disabled {
      cursor: not-allowed;
      background-color: white;

      *,
      & {
        color: #636363;
      }
      &.bordered {
        border: 1px solid #636363;
      }
      &:hover {
        background-color: white;

        *,
        & {
          color: #636363;
        }
      }
    }
    &.reversed {
      &.color-primary {
        background-color: var(--color-primary);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-primary);
          }
          &.bordered {
            border: 1px solid var(--color-primary);
          }
        }
      }
      &.color-secondary {
        background-color: var(--color-secondary);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-secondary);
          }
          &.bordered {
            border: 1px solid var(--color-secondary);
          }
        }
      }
      &.color-third {
        background-color: var(--color-third);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-third);
          }
          &.bordered {
            border: 1px solid var(--color-third);
          }
        }
      }
      &.color-disabled {
        cursor: not-allowed;
        background-color: #636363;

        *,
        & {
          color: white;
        }
        &.bordered {
          border: 1px solid white;
        }
        &:hover {
          background-color: #636363;

          *,
          & {
            color: white;
          }
        }
      }
    }
  }
}