Create a button with a double border? - css

Question

The button I want:
I have tried this, but it doesn't work:
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 3px double #f26700;
background: #f26700;
}
How can i display this white line with CSS?

Answer 1

Write:
button{
border: 3px double white;
}
DEMO here.
OR:
button{
border: 1px double white;
outline: 1px solid #f26700;
}
DEMO here.
OR:
button{
border: 2px solid white;
box-shadow:0 0 0 0px white, 0 0 0 2px #F26700;
}
DEMO here.

Answer 2

as commented, 2 easy options :
box-shadow and outline:
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 1px solid white;
background: #f26700;
outline:solid #f26700 1px;
padding:0.25em 1em;
}
button + button {
box-shadow: 0 0 0 1px #f26700;
outline:none;
}
demo : http://codepen.io/anon/pen/InDqa
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 1px solid white;
background: #f26700;
outline: solid #f26700 1px;
padding: 0.25em 1em;
}
button+button {
box-shadow: 0 0 0 1px #f26700;
outline: none;
}
<button>outlined</button> <button>shadowed</button>

Answer 3

Use the outline property:
CSS
.button {
font-family:'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
line-height: 1.8em;
border: 1px solid white;
background: #f26700;
width: 100px;
height: 30px;
text-align: center;
outline: 1px solid #f26700;
}
Here's the JSFiddle: http://jsfiddle.net/2kgGF/

Answer 4

You can do this just with an outline.
button {
width: 8rem;
font-size: 1rem;
line-height: 2.4rem;
color: white;
background: darkorange;
border: none;
outline: .1rem solid white;
outline-offset: -.3rem;
}
http://jsfiddle.net/lrsbck/7Zp6X/