如何使两个按钮像切换按钮一样

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>