<style>
  @charset "UTF-8";
  .btn {
    outline: none;
    display:inline-block;
    font-weight:400;
    line-height:1.5;
    color:#212529;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
    cursor:pointer;
    user-select:none;
    background-color:transparent;
    border:1px solid #ccc;
    padding:.375rem .75rem;
    font-size:1rem;
    border-radius:.25rem;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
  }
  .btn-group {
    position:relative;
    display:inline-flex;
    vertical-align:middle
  }
  .btn-group-vertical>.btn,
  .btn-group>.btn {
    position:relative;
    flex:1 1 auto
  }
  .btn-group-vertical>.btn-check:checked+.btn,
  .btn-group-vertical>.btn-check:focus+.btn,
  .btn-group-vertical>.btn.active,
  .btn-group-vertical>.btn:active,
  .btn-group-vertical>.btn:focus,
  .btn-group-vertical>.btn:hover,
  .btn-group>.btn-check:checked+.btn,
  .btn-group>.btn-check:focus+.btn,
  .btn-group>.btn.active,
  .btn-group>.btn:active,
  .btn-group>.btn:focus,
  .btn-group>.btn:hover {
    z-index:1
  }
  .btn-group>.btn-group:not(:first-child),
  .btn-group>.btn:not(:first-child) {
    margin-left:-1px
  }
  .btn-group>.btn-group:not(:last-child)>.btn,
  .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius:0;
    border-bottom-right-radius:0
  }
  .btn-group>.btn-group:not(:first-child)>.btn,
  .btn-group>.btn:nth-child(n+3),
  .btn-group>:not(.btn-check)+.btn {
    border-top-left-radius:0;
    border-bottom-left-radius:0
  }


  .btn:focus {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
    box-shadow: 0 0 0 .25rem rgba(130,138,145,.5);
  }

</style>
<div class="btn-group">
  <button type="button" class="btn ">热门</button>
  <button type="button" class="btn ">首字母</button>
  <button type="button" class="btn">最新</button>
</div>

演示效果