CODEWITHSUNDEEP
htmlcsszurb-foundationborder-box
Westwick
Westwick

Reputation: 2487

(Foundation) Border on button causes alignment issues

I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.

The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?

Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/

Upvotes: 0

Views: 65

Answers (2)

Addzy
Addzy

Reputation: 674

button outline class should be the following

.button-outline {
    border:2px solid #222;
    color: #222;
    background-color: rgba(0,0,0,0.0);
    padding: 0.9rem 2rem 0.9rem 2rem !important;
}

Suslov's answer is pretty good though, mine's alright if you leave the button the same size

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

How about adding a border with transparent color.

a.button { 
  border: 2px solid transparent;
}

Upvotes: 1

Related Questions