botón simple CSS CodePen
$yellow: #fff000
$blue: #007bff
$white: #fff
$black: #000
body
margin: 0
section
position: relative
background: $black
height: 100vh
display: flex
align-items: center
.btn-link
display: inline-block
position: relative
padding: 15px 20px
background: $yellow
color: #000
font-size: 18px
text-align: center
text-decoration: none
font-weight: 700
margin: 0 auto 20px
border-radius: 25px
transition: all 0.25s ease-in
z-index: 1
&:after
content: ''
position: absolute
top: 0
left: 0
right: 0
bottom: 0px
background: $yellow
z-index: -1
border-radius: 25px
transition: all 0.25s ease-in
&:hover
color: #fff
background: $blue
text-decoration: none
&:after
bottom: -5px
background: $blue
opacity: 0.75
&:active
color: #fff
text-decoration: none
background: $blue
transform: translateY(5px)
&:after
bottom: 0px
<section>
<a class="btn-link">hover and click here</a>
</section>
SECRET MYSTERY