如何制作一个带内边框的按钮

Question

我正在尝试制作一个具有“内边框”的响应式按钮（如果有意义的话），请参阅附图了解我正在谈论的内容。

我的一些按钮比其他按钮更宽，因为按钮文本更长，这就是响应部分的用武之地。我通过将按钮放入容器 div 中来创建此效果，代码如下：

超文本标记语言

<div class="ttw_button_container">
<a class="ttw_button">START THE JOURNEY</a>
</div>

CSS

.ttw_button_container {
    background: #27d9b4;
    width: 330px;
    height: 50px;
    margin: 0 auto;
}
a.ttw_button{  
    background: #27d9b4;
    color: {{ settings.btn_text_color }};
    border: 1px solid white;
    padding: 6px 52px;
    margin: 4px 0 0 0;
    cursor: pointer;
    font-weight: bold;      
    font-size: 19px;
    text-transform: {{ settings.button_font_style }};
    display: inline-block;
    -webkit-transition: all 200ms ease 0s;
    -moz-transition: all 200ms ease 0s;
    -ms-transition: all 200ms ease 0s;
    -o-transition: all 200ms ease 0s;
    transition: all 200ms ease 0s;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

有没有办法让容器 div 调整自身大小以适应按钮？目前，我正在手动编辑容器的宽度以适合每个按钮，但理想情况下希望自动完成此操作。有没有办法只使用 CSS 来做到这一点，还是我们需要将 javascript 融入其中？

谢谢你！

Answer 1

这是一个使用 box-shadow 的非常简单的解决方案，需要更少的标记和 CSS： http: //jsfiddle.net/Jdzpv/3/。

HTML：

<a class="ttw_button">START THE JOURNEY</a>

CSS：

.ttw_button {
    display: inline-block;
    padding: 6px 25px;
    font-weight: bold;
    font-size: 19px;
    background: #27d9b4;
    box-shadow: 0 0 0 5px #27d9b4,
                inset 0 0 0 1px #fff;
}