Граница с тенью CSS

Question

Как я могу добавить границу к тени?

Я не хочу делать что-то похожее на это

Вот мой код:

.btn {
  margin: 10px;
}

.btn:active span {
  transform: translate(0, 6px);
  box-shadow: 0 -5px 0 blue;
  transition: 0.3s;
}

.btn {
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0 6px 0 blue;
}

.btn span {
  display: inline-block;
  color:white;
  padding: 10px  20px;
  background: #3194c6;
  border-radius: 4px;
  transition: .2s ease-in-out;
}

Вот мой jsfiddle

Answer 1

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

.btn {
  margin:10px;
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0px 0px 0px 2px #000,
              0 6px 0 red,
              0px 6px 0px 2px #000,
              0px 0px 0px 2px #000;
}

.btn span {
  display: inline-block;
  color: white;
  padding: 10px 20px;
  background: #3194c6;
  border-radius: 4px;
  transition: .2s ease-in-out;
}

<a href="#" class="btn"><span>Press this!</span></a>