（基础）按钮上的边框会导致对齐问题

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.

我在设计两种不同风格的按钮时遇到了麻烦。第一个按钮应该是带有2px边框的透明背景,下一个按钮只是基础的按钮默认样式,即没有边框。我认为* {box-sizing:border-box;}会使按钮出现相同的大小而不管填充/边框/边距。我认为这可能不起作用,因为我没有指定宽度/高度,但即使我这样做,它只是将正常按钮推离对齐2px的效果,甚至我仍然希望按钮是根据它们内部文字的自然宽度。

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/

这是我所在的地方:http://jsfiddle.net/xa4d4bfv/

2 个解决方案

#1

How about adding a border with transparent color.

如何添加透明色边框。

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

#2

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

苏斯洛夫的回答非常好,如果你把按钮保持相同的大小,我的好

#1