Using Abstracted Components

index.html

<div class="container">
  <h2>Normal Buttons</h2>
  <button class="button">Send the mail</button>
  <button class="button">Remove changes</button>

  <h2>Using Abstracted components</h2>
  <div class="button__container">
    <div class="button__item">
      <button class="button">Send the mail</button>
    </div>
    <div class="button__item">
      <button class="button">Remove changes</button>
    </div>
  </div>
</div>

style.css

.button {
  background: tomato;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 18px tomato;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.button-outline {
  background: #f9f9f9;
}

/* ADDING MARGIN LEFT ON THE NORMAL BUTTONS */
.button + .button {
  margin-left: 1rem;
  margin-bottom: 3rem; /* JUST TO PUSH THE ABSTRACT EXAMPLE TO 3rem bottom */
}

/* ABSTRACT COMPONENT BUTTONS */
.button__container {
  display: flex;
  align-items: center;
  outline: 2px solid #999;
  outline-offset: 14px;
  margin-left: -1rem; /* to cancel the left margin for the first element [TRY TO COMMENT AND SEE THE CHANGE]*/
}

.button__item {
  margin-left: 1rem;
  outline: 2px solid #999;
  outline-offset: 5px;
}

/*==============================*/
/*========OTHER STYLES=========*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: sans-serif;
  border: 16px ridge #ff6550;
  background: #ffe7e7;
}

.container {
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}