Border to shadow CSS

Question

How I can add border to shadow?

I wan't make something similar to this

Here's my code:

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

Here's my jsfiddle

Temani Afif · Accepted Answer · 2018-08-26T16:05:10.460

Use multiple shadows:

.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>

Border to shadow CSS

1 Answers1