Offset border effect in pure css

Question

I am trying to create an offset border effect. Can this be done with pure css.

These are buttons so will be different sizes and colours.

Answer 1

I use pseudo-element :after to create offset border effect.

body {
  background: black;
  padding: 30px;
}
div {
  background: white;
  height: 75px;
  width: 175px;
  position: relative;
}
div:after {
  content: '';
  background: transparent;
  border: 1px solid white;
  top: 7px;
  right: 7px;
  bottom: -7px;
  left: -7px;
  position: absolute;
  z-index: -1;
}