Создать кнопку с двойной рамкой?

Question

Кнопка Я хочу:

Я попытался это, но он не работает:

button { 
    font-family: 'Ubuntu', sans-serif; 
    font-size: 1em; 
    font-weight: bold; 
    color: white; 
    border: 3px double #f26700; 
    background: #f26700; 
} 

Как я могу отобразить эту белую линию с помощью CSS?

Answer 1

, как заметил, 2 простых вариантов: коробчатого тени и контуры:

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; 
} 

демо: http://codepen.io/anon/pen/InDqa

Answer 2

Запись:

button{ 
    border: 3px double white; 
} 

DEMO here.

ИЛИ:

button{ 
    border: 1px double white; 
    outline: 1px solid #f26700; 
} 

DEMO here.

ИЛИ:

button{ 
    border: 2px solid white; 
    box-shadow:0 0 0 0px white, 0 0 0 2px #F26700; 
} 

DEMO here.

Answer 3

Используйте свойство контура:

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; 
} 

Вот JSFiddle: http://jsfiddle.net/2kgGF/

Answer 4

Вы можете сделать это только с контуром.

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/