От полноширинных до автоматических кнопок с использованием flex-direction

CSS3 16.03.2021

Узнайте, как использовать свойство flex-direction (flexbox) для создания адаптивных кнопок.

flex-direction используется для указания главной оси, вдоль которой располагаются гибкие элементы. Мы можем воспользоваться этим и изменить значение flex-direction с «столбца» на «строку» в определенной точке останова, чтобы создать отзывчивые кнопки.

row (по умолчанию) → элементы гибкости распределяются по оси x
column → элементы гибкости распределяются по оси Y

Обычно на маленьких экранах мы хотим, чтобы наши кнопки занимали всю ширину и уменьшались до своего «автоматического» размера на больших экранах.

Пример кнопок на компьютере или ноутбуке:

ДЕМО

Пример кнопок на смартфоне (вы можете просто сузить свой экран до минимальной ширины и увидите результат в действии):

HTML


<div class="btns">
 <button class="btn btn--subtle">Button</button>
 <button class="btn btn--primary">Button</button>
</div>

CSS

Вы можете использовать свои стили кнопок. Для примера я применил классы btn, btn--subtle и btn--primary который я использую на своём блоге.

Весь стиль адаптивных кнопок выглядит так:


.btns {
  display: flex;
  flex-direction: column;
  margin-bottom: -0.5em;
  margin-left: -0.5em;
}
.btns .btn {
  margin-bottom: 0.5em;
  margin-left: 0.5em;
}

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

Стиль моих кнопок:


/* Стиль кнопок */
.btn {
  border : #c52024 solid 2px;
  color : #c52024;
  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;
}
.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);
}