html - 按钮外的边框填充/间距

Question

我在我正在使用的网站上设置了按钮。我想在按钮外创建一个 2px 的边框，有一点间距。请参见设计图像。

我可以创建边框，但不能创建边框之外的间距。这是当前的开发站点。按钮是第一个图形。

到目前为止我已经尝试了两种方法..

1. 添加透明边框。不幸的是，我可以看到按钮的蓝色背景，所以这没有用。

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

2. 在按钮外添加了一个 div，并为其添加了带填充的边框。

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

虽然这在顶部和底部看起来不错，但在两侧它延伸到整个网站的长度。我不能添加固定宽度，因为它们会有所不同，所以我不确定如何让它工作。

有什么想法吗？

Answer 1

我相信您正在寻找outline-offset ，像这样:

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