Render a button like a couple of spans in CSS - html

Question

I want to render a couple of submit buttons (they stands in the center of a paragraph, right under a form) exactly as in this html code:
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>
<span>
<span class='butleftspan' style="border-right-width:2px; border-right-style:solid; border-right-color:#ffffff;">
Register
</span>
<span>
>
</span>
</span>
</p>
The code above generate these two spans that are the result I aim to achieve:
This is exactly how I want that the two working buttons (and not only two spans) appear.
I tried to obtain the same result as in the picture and code above defining buttons,tables inside of buttons, spans an everything possible in the world, but I can't achieve my purpose. Any help will be super-appreciate! Thanks in advance!
In simple terms I'd want to have a Login and a register button that appears exactly as in the picture (that i obtained from the HTML code above).

Answer 1

As far I understand from your question you want the same result but using a button tag, in that case you can use ::after to insert the ">" symbol and achieve with CSS this:
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>