как сделать две кнопки как у кнопки переключения

Question

У меня две кнопки перекрывают друг друга таким образом, что они выглядят так:

Я сделалэто как две кнопки с некоторыми CSS, которые я предоставил ниже ...

.tab {
    overflow: hidden;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 30px;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border:1px solid #cccc;
    color: #676767;
    &.active {
        color:#ffffff ;
        background-color: #009bdf;
    }
}

 <div class="tab"  style="width: 100%;">
        <button class="tablinks" [class.active]="activeTab=='btn1'" (click)="clickType('btn1')" style="width: 50%;z-index:-2;">
            <b >Button 1 </b>
             <small>{{btn_status}}</small>
        </button>
        <button class="tablinks" [class.active]="activeTab=='btn2'" (click)="clickType('btn2')" style="width: 50%;margin-left: -90px;">
            <b>Button 2</b>
         <small>{{btn_status}}</small>
        </button>
    </div>    

Я думаю, что есть лучшие способы, чем наложение одной кнопки поверх другой.Может кто-нибудь предложить лучшее решение?

Answer 1

Я изменил код CSS и Angular, поэтому пример работает.Добавлены z-index и position: relative, чтобы все заработало.Должно быть легко собрать обратно.

.tab {
    overflow: hidden;
}

.tab button {
    position: relative;
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 30px;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border:1px solid #cccc;
    color: #676767;
    z-index: 1;
    width: 50%;
}
.tab button.active {
    z-index: 2;
    color:#ffffff ;
    background-color: #009bdf;
}

 <div class="tab" style="width: 100%;">
     <button class="tablinks active">
         <b>Button 1</b>
          <small>selected</small>
     </button>
     <button class="tablinks" style="margin-left: -90px;">
          <b>Button 2</b>
          <small></small>
      </button>
  </div>
  <br/>
  <div class="tab" style="width: 100%;">
     <button class="tablinks">
         <b>Button 1</b>
          <small></small>
     </button>
     <button class="tablinks active" style="margin-left: -90px;">
          <b>Button 2</b>
          <small>selected</small>
      </button>
  </div>