0

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

对我来说，简单的解决方案是在普通按钮上添加一个与背景颜色相同的边框，但最终我还必须为悬停、活动等边框添加样式......似乎应该成为更好的方法。我在这里做错了吗？

这是我所在位置的 jsfiddle：http: //jsfiddle.net/xa4d4bfv/

4

2 回答 2

1

如何添加透明颜色的边框。

a.button { 
  border: 2px solid transparent;
}
于 2015-05-08T22:51:57.600 回答
0

按钮大纲类应如下

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

苏斯洛夫的回答很好，如果你让按钮保持相同的大小，我的没关系

于 2015-05-08T22:53:18.650 回答