Two side-by-side buttons

Hi there,

this is HTML:

<div class="hero-buttons">
	<a class="button" href="#">Get Started</a> <a class="button ghost" href="#">Contact Us</a>
</div>

And then add this CSS to your site:

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
    border: 1px solid transparent;
}

button.ghost,
html input[type="button"].ghost,
input[type="reset"].ghost,
input[type="submit"].ghost,
a.button.ghost,
a.button.ghost:visited,
a.wp-block-button__link.ghost:not(.has-background) {
    background: transparent;
    color: inherit;
    border-color: inherit;
}

button.ghost:hover,
html input[type="button"].ghost:hover,
input[type="reset"].ghost:hover,
input[type="submit"].ghost:hover,
a.button.ghost:hover,
a.wp-block-button__link.ghost:not(.has-background):hover {
    background: transparent;
    color: #1e73be;
}

.hero-buttons>* {
    margin: 10px;
}

There's no way I would have ever figured that out. Thank you so much.

Is there a better way to separate them a bit than by my current method of adding four &nbsp?

Edit this CSS:

.hero-buttons>* {
    margin: 10px;
}

Increase the 10px

Perfect! Thank you.

You're welcome