Рендеринг кнопки как пара пролётов в CSS

Question

Я хочу отобразить пару кнопок отправки (они стоят в центре абзаца, прямо под формой) точно так же, как в этом HTML-коде:

span {
  background-color: #cbaa5c;
  padding: 4px;
  color: #ffffff;
  text-transform: uppercase;
}

<p style="text-align:center;">
  <span>
    <span style="border-right-width:2px; border-right-style:solid; border-right-color:#ffffff;">
      Login
    </span>
    <span>
      >
    </span>
  </span>
  &nbsp;&nbsp;&nbsp;
  <span>
    <span class='butleftspan' style="border-right-width:2px; border-right-style:solid; border-right-color:#ffffff;">
      Register
    </span>
    <span>
      >
    </span>
  </span>
</p>

Приведенный выше код генерирует эти два диапазона, которые являются результатом, которого я стремлюсь достичь:

Именно так я хочу, чтобы две рабочие кнопки (а не только два пролета) появлялись.

Я пытался получить тот же результат, что и на рисунке выше, и код, определяющий кнопки, таблицы внутри кнопок, охватывает все возможное в мире, но я не могу достичь своей цели. Любая помощь будет супер-признательна! Заранее спасибо!

Говоря простым языком, я бы хотел, чтобы у меня были «Логин» и кнопка регистрации, которая выглядит точно так же, как на картинке (которую я получил из кода HTML выше).

Answer 1

Насколько я понимаю из вашего вопроса, вы хотите получить тот же результат, но с использованием тега button, в этом случае вы можете использовать ::after, чтобы вставить символ ">" и добиться с помощью CSS этого :

p {
  text-align: center;
}

button {
  background: #cbaa5c;
  border: none;
  color: white;
  line-height: 2;
  padding: 0 8px;
}

button:after {
  content: ">";
  display: inline-block;
  padding-left: 8px;
  margin-left: 8px;
  border-left: 1px solid white;
}

<p>
  <button>LOGIN</button>
  <button>REGISTER</button>
</p>