Я пытаюсь создать эту кнопку с изображения ниже. Однако я не мог добавить Box-shadow вверху с border-radius и сделать кнопки кликабельными. Как сделать кнопку интерактивной? Я ...

1
Guilherme Felipe Reis 28 Дек 2020 в 13:23

1 ответ

Лучший ответ

Просто добавьте pointer-events: none; в ::before. В этом случае это решит вашу проблему.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 39px;
}

.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  background: #EFF4F5;
  border-radius: 16px;
  position: relative;
}

.tabs:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  pointer-events: none;
}

.tab-button {
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  background: #EFF4F5;
  box-shadow: inset 0px -1px 0px rgba(14, 14, 44, 0.02);
  border-radius: 16px;
  border: none;
  color: #1f2bd4;
}

.button-active {
  background: #1f2bd4;
  box-shadow: inset 0px -1px 0px rgba(14, 14, 44, 0.2);
  border-radius: 16px;
  color: #FFFFFF;
}
<div class="wrapper">
  <div class="tabs">
    <button class="tab-button button-active">Click here</button>
    <button class="tab-button">Click here</button>
  </div>
</div>
1
doğukan 28 Дек 2020 в 10:25