<button>
  Offset Button
</button>
button {
  background: none;
  border: 5px solid black;
  padding: 1.5rem 3rem;
  box-shadow:
    5px 5px red,
    10px 10px black,
    inset 5px 5px white,
    inset 10px 10px black;
  font-family: -system-ui, sans-serif;
  font-weight: bold;
  font-size: 2rem;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    background: black;
  }
  &::before {
    top: 100%;
    left: 5px;
    height: 10px;
    width: 5px;
  }
  &::after {
    left: 100%;
    top: 5px;
    height: 5px;
    width: 10px;
  }
}



body {
  padding: 4rem 2rem;
  text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.