Border padding/spacing outside of a button

Question

I have buttons setup on a website I'm working on. I would like to create a 2px border outside of the button, with a bit of spacing. See image of the design.

I'm able to create the border, but not the spacing outside of it. Here is the current dev site. the button is the first graphic.

I've tried 2 approaches so far..

1. Add a transparent border. Unfortunately, I can see the blue background of the button, so this didn't work.

    .hsContainer a.action_button { padding: 15px 40px; border: 5px solid rgba(255, 255, 255, .0); outline: 2px solid #fff; }

2. Added a div outside of the button, and added a border with padding to it.

    .slide-button { padding: 10px; border: 2px solid #fff; }

While this looked fine for the top and bottom, on the sides it extended across the length of the site. I can't add a fixed width, because they will vary, so I'm not sure how to get it to work.

Any ideas?

Answer 1

I believe you are looking for outline-offset , like so:

.hsContainer a.action_button {
    padding: 15px 40px;
    outline: 2px solid white;
    outline-offset: 2px;
}

Answer 2

youre looking for display: inline-block . right now, your div is a block, which means it expands to the full width of its parent (in this case the width of the page). inline-block makes it "hug the contents it contains"

.slide-button {
    padding: 10px;
    display: inline-block; //add this line
    border: 2px solid #fff;
}

Answer 3

I have a similar question and what helped me is the ff:

display: inline-block;

margin: (margin of your choice);