<button type="button" class="button button__add">
  <span class="button__plus">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.84296C9 1.29067 8.55228 0.842957 8 0.842957C7.44771 0.842957 7 1.29067 7 1.84296V6.99998H1.84296C1.29067 6.99998 0.842957 7.4477 0.842957 7.99998C0.842957 8.55227 1.29067 8.99998 1.84296 8.99998H7V14.1571C7 14.7094 7.44771 15.1571 8 15.1571C8.55228 15.1571 9 14.7094 9 14.1571V8.99998H14.1571C14.7094 8.99998 15.1571 8.55227 15.1571 7.99998C15.1571 7.4477 14.7094 6.99998 14.1571 6.99998H9V1.84296Z"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.84296C9 1.29067 8.55228 0.842957 8 0.842957C7.44771 0.842957 7 1.29067 7 1.84296V6.99998H1.84296C1.29067 6.99998 0.842957 7.4477 0.842957 7.99998C0.842957 8.55227 1.29067 8.99998 1.84296 8.99998H7V14.1571C7 14.7094 7.44771 15.1571 8 15.1571C8.55228 15.1571 9 14.7094 9 14.1571V8.99998H14.1571C14.7094 8.99998 15.1571 8.55227 15.1571 7.99998C15.1571 7.4477 14.7094 6.99998 14.1571 6.99998H9V1.84296Z"></path>
    </svg>
  </span>
  Создать рассылку
</button>
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 1.3s;
  // .button__plus
  &__plus {
    background: #b8bae0;
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  // .button__add
  &__add {
    background: #dfe0f1;
    svg {
      transition: all 1.3s;
      fill: #574594;
      width: 14.31px;
      height: 14.31px;
    }
  }
  &:hover {
    transition-duration: 0s;
    color: #fff;
    svg {
      transition-duration: 0s;
      fill: #fff;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.