<h2>Large</h2>
<div class="block">
  <button class="button large primary">Button</button>
  <a href="#" class="button large secondary">Button</a>
  <button class="button large tertiary">Button</button>
  <button class="button large success">Button</button>
  <button class="button large danger">Button</button>
</div>
<div class="block">
  <button class="button large primary outline">Button</button>
  <button class="button large secondary outline">Button</button>
  <button class="button large tertiary outline">Button</button>
  <button class="button large success outline">Button</button>
  <button class="button large danger outline">Button</button>
</div>
<div class="block">
  <button class="button large primary pressed">Button</button>
  <button class="button large secondary pressed">Button</button>
  <button class="button large tertiary pressed">Button</button>
  <button class="button large success pressed">Button</button>
  <button class="button large danger pressed">Button</button>
</div>
<div class="block">
  <button class="button large primary transparent">Button</button>
  <button class="button large secondary transparent">Button</button>
  <button class="button large tertiary transparent">Button</button>
  <button class="button large success transparent">Button</button>
  <button class="button large danger transparent">Button</button>
</div>

<h2>Middle</h2>
<div class="block">
  <button class="button middle primary">Button</button>
  <button class="button middle secondary">Button</button>
  <button class="button middle tertiary">Button</button>
  <button class="button middle success">Button</button>
  <button class="button middle danger">Button</button>
</div>
<div class="block">
  <button class="button middle primary outline">Button</button>
  <button class="button middle secondary outline">Button</button>
  <button class="button middle tertiary outline">Button</button>
  <button class="button middle success outline">Button</button>
  <button class="button middle danger outline">Button</button>
</div>
<div class="block">
  <button class="button middle primary pressed">Button</button>
  <button class="button middle secondary pressed">Button</button>
  <button class="button middle tertiary pressed">Button</button>
  <button class="button middle success pressed">Button</button>
  <button class="button middle danger pressed">Button</button>
</div>
<div class="block">
  <button class="button middle primary transparent">Button</button>
  <button class="button middle secondary transparent">Button</button>
  <button class="button middle tertiary transparent">Button</button>
  <button class="button middle success transparent">Button</button>
  <button class="button middle danger transparent">Button</button>
</div>

<h2>Small</h2>
<div class="block">
  <button class="button small primary">Button</button>
  <button class="button small secondary">Button</button>
  <button class="button small tertiary">Button</button>
  <button class="button small success">Button</button>
  <button class="button small danger">Button</button>
</div>
<div class="block">
  <button class="button small primary outline">Button</button>
  <button class="button small secondary outline">Button</button>
  <button class="button small tertiary outline">Button</button>
  <button class="button small success outline">Button</button>
  <button class="button small danger outline">Button</button>
</div>
<div class="block">
  <button class="button small primary pressed">Button</button>
  <button class="button small secondary pressed">Button</button>
  <button class="button small tertiary pressed">Button</button>
  <button class="button small success pressed">Button</button>
  <button class="button small danger pressed">Button</button>
</div>
<div class="block">
  <button class="button small primary transparent">Button</button>
  <button class="button small secondary transparent">Button</button>
  <button class="button small tertiary transparent">Button</button>
  <button class="button small success transparent">Button</button>
  <button class="button small danger transparent">Button</button>
</div>

<h2>Icons left</h2>
<div class="block">
  <button class="button large primary"><i class="icon github"></i>Button</button>
  <button class="button middle secondary outline"><i class="icon github"></i>Button</button>
  <button class="button small tertiary transparent"><i class="icon github"></i>Button</button>
</div>

<h2>Icons right</h2>
<div class="block">
  <button class="button large primary">Button<i class="icon github"></i></button>
  <button class="button middle secondary outline">Button<i class="icon github"></i></button>
  <button class="button small tertiary transparent">Button<i class="icon github"></i></button>
</div>

<h2>Loading</h2>
<div class="block">
  <button class="button large primary outline js_button_loading" data-loading="Loading...">Button</button>
  <button class="button middle primary outline js_button_loading" data-loading="Loading...">Button</button>
  <button class="button small primary outline js_button_loading" data-loading="Loading...">Button</button>
</div>

<h2>Icons loading</h2>
<div class="block">
  <button class="button large primary outline js_button_loading" data-loading="Loading..."><i class="icon github"></i>Button</button>
  <button class="button middle primary outline js_button_loading" data-loading="Loading...">Button<i class="icon github"></i></button>
  <button class="button small primary outline js_button_loading" data-loading="Loading..."><i class="icon github"></i>Button</button>
</div>
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;1,500&family=Roboto:wght@300;500;700&display=swap');

@import url('https://zharikov.design/css/styles.css');

$tr: transparent;

// Цвета
$colors: (
  primary: (background-color: #325FEB, color: #ffffff),
  secondary: (background-color: #F9AA34, color: #202327),
  tertiary: (background-color: #202327, color: #ffffff),
  success: (background-color: #52B530, color: #ffffff),
  danger: (background-color: #E85656, color: #ffffff),
);

$sizes: (
  large: (font-size: 24px, line-height: 24px, weight: 600, padding: 16px 24px),
  middle: (font-size: 20px, line-height: 20px, weight: 600, padding: 12px 16px),
  small: (font-size: 16px, line-height: 16px, weight: 500, padding: 8px 12px)
);

$outline: (
  primary: (background-color: #ffffff, color: #325FEB, box-shadow: inset 0 0 0 2px #325FEB),
  secondary: (background-color: #ffffff, color: #202327, box-shadow: inset 0 0 0 2px #F9AA34),
  tertiary: (background-color: #ffffff, color: #202327, box-shadow: inset 0 0 0 2px #202327),
  success: (background-color: #ffffff, color: #202327, box-shadow: inset 0 0 0 2px #52B530),
  danger: (background-color: #ffffff, color: #202327, box-shadow: inset 0 0 0 2px #E85656)
);

$hover: (
  primary: (background-color: #6185F0, color: #ffffff),
  secondary: (background-color: #FABF66, color: #202327),
  tertiary: (background-color: #4E555F, color: #ffffff),
  success: (background-color: #8DDA72, color: #ffffff),
  danger: (background-color: #EE8181, color: #ffffff)
);

$transparent: (
  primary: #325FEB,
  secondary: #F9AA34,
  tertiary: #202327,
  success: #52B530,
  danger: #E85656
);

$pressed: (
  primary: (background-color: #1544D6, color: #ffffff),
  secondary: (background-color: #F29408, color: #202327),
  tertiary: (background-color: #202327, color: #ffffff),
  success: (background-color: #408D25, color: #ffffff),
  danger: (background-color: #E12828, color: #ffffff)
);


.button {
  width: auto;
  cursor: pointer;
  box-sizing: border-box;
  gap: 8px;
  border: 0;
  border-radius: .5em;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 2;

  &::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: $tr;
    z-index: -1;
    opacity: 0;
    transition: .5s;
    transform: translateX(-100%);
    border-radius: 4px;
    border-top-right-radius: 100px;
  }

  // Размеры и основные стили
  @each $size-name, $size-map in $sizes {
    &.#{$size-name} {
      padding: map-get($size-map, padding);
      font-size: map-get($size-map, font-size);
      line-height: map-get($size-map, line-height);
      weight: map-get($size-map, weight);

      // Цвета и состояния
      @each $color-name, $color-map in $colors {
        &.#{$color-name} {
          background-color: map-get($color-map, background-color);
          color: map-get($color-map, color);
        }
      }

      // Ховер
      @each $color-name, $color-map in $hover {
        &.#{$color-name} {
          &:hover {
            color: map-get($color-map, color);
            &::after {
              opacity: 1;
              width: calc(100% + 4px);
              height: calc(100% + 4px);
              transform: translateX(0);
              border-top-right-radius: 4px;
              background-color: map-get($color-map, background-color);
            }
  		    }
        }
      }

      // Нажатая или активная кнопка
      @each $color-name, $color-map in $pressed {
        &.#{$color-name} {
          &:active {
            color: map-get($color-map, color);
            &::after {
              background-color: map-get($color-map, background-color);
            }
  		    }
        }
      }
    }
  }

  // Модификаторы
  // outline
  @each $outline-name, $outline-map in $outline {
    &.#{$outline-name} {
      &.outline { 
        background-color: map-get($outline-map, background-color);
        color: map-get($outline-map, color);
        box-shadow: map-get($outline-map, box-shadow);
      }
    }
  }
  // transparent
  @each $transparent-name, $transparent-value in $transparent {
    &.#{$transparent-name} {
      &.transparent { 
        background-color: $tr;
        color: $transparent-value;
        box-shadow: none;
      }
    }
  }
  // active
  @each $color-name, $color-map in $pressed {
    &.#{$color-name} {
      &.pressed { 
        background-color: map-get($color-map, background-color);
        color: map-get($color-map, color);
        box-shadow: map-get($color-map, box-shadow);
      }
    }
  }
  // disabled
  &.disabled {
    opacity: .5;
    pointer-events: none;
    filter: none;
  }
  // full
  &.full {
    width: 100%;
  }
  &.loading {
    pointer-events: none;

    i {
      opacity: 0;
      position: absolute;
    }

    &::before {
      content: '';
      width: 1em;
      height: 1em;
      display: block;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.46587 1.75901C9.27349 0.981572 8.48284 0.499062 7.73426 0.783744C5.32074 1.70159 3.2542 3.37955 1.85969 5.58329C0.205324 8.19769 -0.375359 11.35 0.238851 14.3823C0.853061 17.4146 2.6147 20.0925 5.15604 21.857C7.69739 23.6215 10.8221 24.3363 13.8778 23.8522C16.9335 23.368 19.6842 21.7224 21.5557 19.2587C23.4271 16.795 24.2747 13.7038 23.9216 10.6301C23.5684 7.55649 22.0417 4.73803 19.6602 2.76306C17.6528 1.09831 15.1688 0.141317 12.5898 0.0144626C11.7898 -0.0248829 11.1871 0.678395 11.2444 1.47722C11.3018 2.27605 11.9991 2.86506 12.7969 2.93519C14.6267 3.09605 16.3775 3.80854 17.8088 4.99552C19.6147 6.49317 20.7724 8.63044 21.0403 10.9612C21.3081 13.292 20.6653 15.6361 19.2462 17.5044C17.827 19.3726 15.7412 20.6205 13.424 20.9876C11.1067 21.3548 8.73728 20.8127 6.81015 19.4747C4.88302 18.1366 3.54715 16.1059 3.08139 13.8065C2.61562 11.5071 3.05596 9.11666 4.31049 7.13414C5.30479 5.56285 6.74962 4.34406 8.4401 3.62546C9.17715 3.31215 9.65825 2.53645 9.46587 1.75901Z' fill='url(%23paint0_angular_2709_267)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_angular_2709_267' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(12 12) rotate(-99.4623) scale(12.1655)'%3E%3Cstop stop-color='%23325FEB'/%3E%3Cstop offset='1' stop-color='%23325FEB' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
      background-size: contain;
      animation: rotation 2s infinite linear;
    }
  }
}

// Page style
body {
  padding: 20px;
  height: auto !important;
  &::after {
    display: none !important;
  } 
}

.block {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 8px;
  font-family: 'Raleway';
}

h2 {
  margin: 40px 0 12px;
  font: 40px/40px 'Raleway';
}

// Animation
@-webkit-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -o-transform:rotate(360deg);
      transform:rotate(360deg);}
}
@-moz-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -o-transform:rotate(360deg);
      transform:rotate(360deg);}
}
@-o-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -o-transform:rotate(360deg);
      transform:rotate(360deg);}
}
@keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
      -moz-transform:rotate(720deg);
      -o-transform:rotate(360deg);
      transform:rotate(360deg);}
}
View Compiled
$(document).ready(function() {
  function checkButtonState() {
    $('.button').each(function() {
      var $button = $(this);
      var $icon = $button.find('i.icon');

      if ($button.hasClass('loading')) {
        var loadingText = $button.data('loading');

        if (!$button.data('original-html')) {
          $button.data('original-html', $button.html());
        }
        if (!$button.data('original-text')) {
          $button.data('original-text', $button.text().trim());
        }

        if ($icon.length) {
          $button.html($icon.prop('outerHTML') + ' ' + loadingText);
        } else {
          $button.text(loadingText);
        }
      } else {
        var originalHTML = $button.data('original-html');
        var originalText = $button.data('original-text');

        if (originalHTML) {
          $button.html(originalHTML);
        } else if (originalText) {
          $button.text(originalText);
        }
      }
    });
  }

  checkButtonState();

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        checkButtonState();
      }
    });
  });

  $('.button').each(function() {
    observer.observe(this, {
      attributes: true
    });
  });

  $(document).on('click','.js_button_loading', function(){
    var $this = $(this); 
    $this.addClass('loading');
    setTimeout(function() {
      $this.removeClass('loading'); 
    }, 3000);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js