[Resolved] Two side-by-side buttons

[Pamela]

What is the code to create two side-by-side buttons, as shown in the page hero of the Split site demo?

I can’t seem to import that particular site, so I can’t just get it from there.

[David]

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;
}

[Pamela]

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?

[David]

Edit this CSS:

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

Increase the 10px

[Pamela]

Perfect! Thank you.

[David]

You’re welcome

[Author]

Posts