Нужна помощь с вёрсткой кнопки

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: #86509c; 
} 
 
a { 
  padding: 1.25rem 3.75rem; 
  background-color: #eb7d4a; 
  color: white; 
  font-family: sans-serif; 
  text-transform: uppercase; 
  text-decoration: none; 
  border-radius: 3px; 
  box-shadow: 0 3px 0 rgb(192, 103, 77); 
}

<a href="#">Work with us!</a>

box-shadow это тень вокруг элемента(кнопка, блок, картинка), можно и внутрь сделать подсветку например в поле импута, есть онлайн настройка теней даже в инете. transition это время выполнения анимации или ховер эфекта( изменение блока, кнопки (цвет, размер, яркость) при наведении например).

У меня есть вариант:

<div class="col lg-6" id="waveBtn">
            <button class="fcss waveBtn">Click Me!</button>
                </div>
#waveBtn{
    background-color: #F5F5F5;
}
.fcss.waveBtn{
    border: none;
    padding: 20px 40px;
    background-color: #00BCD4;
    color: #000;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    transform: 0.2s;
    z-index: 2;
}
.fcss.waveBtn:after{
    content: 'Click Me!';
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff; 
    z-index: 1;
    width: 100%;
    height: 0px;
    border-radius: 0% 0% 50% 50%; 
    opacity: 0;
}
.fcss.waveBtn:hover:after{
    animation: fallen 0.3s linear forwards;
}
.fcss.waveBtn:hover{
    color: #000;
}
@keyframes fallen{
    0%{
        height: 0;
        opacity: 1;
        border-radius: 0% 0% 100% 100%;
    }
    90%{
        border-radius: 0% 0% 10% 10%;
    }
    100%{
        height: 100%;
        background-color: #FFC107;
        opacity: 1;
        border-radius: 0%;
    }
}