html - 如何在按钮中的文本周围放置边框？

Question

我想在按钮的文本周围有一个彩色边框。

我的按钮是这样的：

<input id="btnexit" class="exitbutton" type="button" value="Exit" name="btnExit"></input>

我已经在 CSS 中添加了按钮边框的样式，但我还需要在 text 周围添加彩色边框Exit。

是否可以在 CSS 中做到这一点？不然我怎么办？

Answer 1

您可以在按钮内放置一个跨度，这样您就有两个元素可以设置样式。

html:

<button>
    <span>click me!</span>
</button>

和CSS：

button{
    border: 1px solid #ccc;
    background: #eee;
    padding: 5px 10px;
}
button span{
    border: 1px solid red;
}

例子！

Answer 2

尝试这个 ：

<button type="button">
     <span style="border:1px solid #FF0000;">Button</span>
</button>

Answer 3

像这样

演示

 .exitbutton {

padding:10px;
background-color:white;
  cursor:pointer;
}
input{
    border:1px solid blue;
}