<div class="wrapper">
<div class="row">
<a href="#" class="btn-yellow">Hello</a>
<a href="#" class="btn-red">Hallo</a>
<a href="#" class="btn-blue">Marhaban</a>
<a href="#" class="btn-purple">Ni Hao</a>
</div>
<div class="row">
<a href="#" class="btn-green">Hej</a>
<a href="#" class="btn-pink">Bonjour</a>
<a href="#" class="btn-lime">Namaste</a>
<a href="#" class="btn-aqua">Ciao</a>
</div>
<div class="row">
<a href="#" class="btn-orange">Konnichiwa</a>
<a href="#" class="btn-gold">Annyeong</a>
<a href="#" class="btn-grey">Goddag</a>
</div>
</div>
html, body
background-color: #f2f2f2
color: #232323
font-family: sans-serif
height: 100vh
.wrapper
width: 1000px
margin: 0 auto
text-align: center
.row
margin: 100px auto
.btn-yellow
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
&:hover
&:before
top: 0
left: 0
width: 102%
height: 100%
&:active
&:before
top: -10px
left: 18px
width: 102%
height: 100%
&:before
content: ''
position: absolute
z-index: -1
top: 12px
left: -14px
width: calc(100% + 6px)
height: calc(100% + 6px)
background-color: #f9d159
transition: all .3s ease
.btn-red
.btn-yellow
&:before
background-color: #e45050
.btn-blue
.btn-yellow
&:before
background-color: #58a9ee
.btn-purple
.btn-yellow
&:before
background-color: #bc79e7
.btn-green
.btn-yellow
&:before
background-color: #36bf73
.btn-pink
.btn-yellow
&:before
background-color: #e855cb
.btn-lime
.btn-yellow
&:before
background-color: #a4f478
.btn-aqua
.btn-yellow
&:before
background-color: #5af3f5
.btn-orange
.btn-yellow
&:before
background-color: #dc612b
.btn-gold
.btn-yellow
&:before
background-color: #c5ac47
.btn-grey
.btn-yellow
&:before
background-color: #a8a8a1