<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.