Archived topic

How do I add padding around buttons so they don't touch each other in site hero?

1 reply · Started by rossnmia on September 11, 2019

Viewing posts 1–2 of 2

September 11, 2019 at 9:37 pm #1007315

I need to add css code to add some padding around buttons so when they are bunched together on two lines in my site hero they have gaps between the two lines of buttons please? I can adjust line height but that does not apply to buttons. If I can add a transparent border that would be great.

Thanks

Mia

September 12, 2019 at 1:38 am #1007398

Hi there,

If this is your markup:

<a href="#" class="button hero-button">Button 1</a>
<a href="#" class="button hero-button">Button 2</a>

They will be displayed inline. To put some space between them horizontally:

.hero-button {
    margin-right: 15px;
}

If you want them stacked:

.hero-button {
    display: block;
    margin-bottom: 15px;
}

This archived topic is closed to new replies.

Start building better websites today.