<div class="btns">
  <button class="btn btn--subtle">Button</button>
  <button class="btn btn--primary">Button</button>
</div>
/* 💡 Creating responsive buttons using flex-direction */
/* 🔗 https://s-sd.ru/blog_studio_design/sozdanie-adaptivnyh-knopok/ */

.btns {
  display: flex;
  flex-direction: column;
  margin-bottom: -0.5em;
  margin-left: -0.5em;
  width : 300px;
  margin: 0 auto;
  margin-top:70px;
}
.btns .btn {
  margin-bottom: 0.5em;
  margin-left: 0.5em;
}

@media (min-width: 32rem) {
  .btns {
    flex-direction: row;
  }
}

/* Стиль кнопок */
.btn {
  border : #c52024 solid 2px;
  color : #fff;
  background : #fff;
  padding : 0.9em 1.4em;
  text-align : center;
  text-transform : uppercase;
  font-weight : 700;
  width : 140px;
  border-radius : 6px;
  font-size: 1.5rem;
  transition : 0.2s;
  cursor: pointer;
}
.btn:hover {
  border : #c52024 solid 2px;
  color : #fff;
  background : #c52024;
}
.btn:before {
  position : absolute;
  z-index : -1;
  content : '';
  top : 100%;
  left : 5%;
  height : 10px;
  width : 90%;
  opacity : 0;
  background-color : hsl(0 0% 0% / 0.07);
  border-radius : 100%;
  transition-duration : 0.3s;
  transition-property : transform, opacity;
}
.btn:hover {
  transform : translateY(-5px);
}
.btn:hover:before {
  opacity : 1;
  transform : translateY(5px);
}

.btn--subtle {
    background-color: #3a3f46 !important;
    font-weight: 300 !important;
    width: auto !important;
    padding: 1.1em 1.3em !important;
    border-bottom: none !important;
    border-radius: 6px;
    font-size: 1.5rem;
    margin: 2px !important;
    border: 0px !important;
    box-shadow: inset 0px -4px 0px rgba(45,35,66,0.3);
}
.btn--primary {
    background-color: #c52024 !important;
    font-weight: 300 !important;
    width: auto !important;
    padding: 1.1em 1.3em !important;
    border-bottom: none !important;
    border-radius: 6px;
    color: white !important;
    font-size: 1.5rem;
    margin: 2px !important;
    border: 0px !important;
    box-shadow: inset 0px -4px 0px rgba(45,35,66,0.3);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.