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

Question

我希望在按钮文本周围有彩色边框。

我的按钮是这样的：

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

我已经在CSS中添加了按钮边框的样式，但我还需要在文本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;
}

Example!

Answer 2

试试这个：

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

Answer 3

喜欢这个

<强> demo

 .exitbutton {

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