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

Question

Ниже приведен код для кнопки. Я хочу использовать тень для создания 2-й границы кнопок вместо того, чтобы ее заворачивать внутрь. Причина этого - дать мне больше возможностей изменить внешний вид этого.

Прямо сейчас я могу использовать что-то вроде box-shadow: 0 0 5px #EEE; или box-shadow: 5px 5px 0 #EEE, -5px -5px 0 #EEE;, чтобы создать вид 2-й границы.

За исключением первого, есть, конечно, градиент, а второй - зазор слева внизу и справа вверху. Как создать промежуток или нет градиента для эффекта, который я хочу?

button { 
    border: 1px solid #CCC; 
    border-bottom: 1px solid #BBB; 
    background: linear-gradient(#FFF, #EEE); 
    box-shadow: 5px 5px 0 #EEE, -5px -5px #EEE; 
    width: 150px; 
    padding: 5px; 
    margin: 5px; 
} 

Answer 1

Вместо того чтобы создавать несколько теней offsetted коробки, вы можете просто использовать один без смещения и распространения 5px радиус:

button { 
 
    border: 1px solid #CCC; 
 
    border-bottom: 1px solid #BBB; 
 
    background: linear-gradient(#FFF, #EEE); 
 
    box-shadow: 0 0 0 5px #EEE; 
 
    width: 150px; 
 
    padding: 5px; 
 
    margin: 5px; 
 
}

<button>button</button>

Более info on box-shadow

Answer 2

Вы могли бы используйте outline вместо box-shadow. Оба свойства не занимают места.

button { 
 
    border: 1px solid #CCC; 
 
    border-bottom: 1px solid #BBB; 
 
    background: linear-gradient(#FFF, #EEE); 
 
    outline: 5px solid #EEE; /*this*/ 
 
    width: 150px; 
 
    padding: 5px; 
 
    margin: 5px; 
 
}

<button>button</button>