<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