Как создать эффект слайда на кнопке при нажатии на одну из другой

Question

Я хочу знать, как создать слайд-эффект, такой как веб-сайт stripe.com, на кнопках или вкладках

Вот мой дизайн

Код переднего конца

 <nav id="sw-nav-developers" class="nav flex-md-column justify-content-between justify-content-md-start nav-pills nav-pills-light nav-fill"><a class="nav-item nav-link text-md-left active" data-toggle="tab" href="#payasyou-tab"><i class="icon fas fa-code"></i> HTML Structure</a> 
                    <hr class="mt-2">
                    <a  class="nav-link accent" style="color:#db78dd;font-weight: 600;text-transform: uppercase;">Software Coverage <i class="icon fas fa-long-arrow-alt-right"></i></a>

                   <a class="nav-item nav-link text-md-left " data-toggle="tab" href="#basic-tab"><i class="icon fas fa-code"></i>Basic</a>
                   <a class="nav-item nav-link text-md-left" data-toggle="tab" href="#pro-tab"><i class="icon fab fa-sass"></i> Pro</a>
    <a class="nav-item nav-link text-md-left" href="#premium-tab" data-toggle="tab"><i class="icon fas fa-retweet fa-rotate-90"></i> Premium</a> <a class="nav-item nav-link text-md-left" href="#exclusive-tab" data-toggle="tab"><i class="icon fas fa-exclamation-triangle"></i> Exclusive</a>
                    <hr class="mt-2"><a class="nav-link accent" style="color:#45b2e8;font-weight: 600;text-transform: uppercase;">Hardware Coverage <i class="icon fas fa-long-arrow-alt-right"></i></a>

                    <a class="nav-item nav-link text-md-left " data-toggle="tab" href="#oneyear-tab"><i class="icon fas fa-code"></i> HTML Structure</a> <a class="nav-item nav-link text-md-left" data-toggle="tab" href="#twoyear-tab"><i class="icon fab fa-sass"></i> SASS compiler</a>  </nav>

теперь я достигаю скользящего эффекта при наведении, но как этого добиться при нажатии кнопки или при активном.

CSS, который я использовал

nav#sw-nav-developers a.nav-item {
        position: relative;
        width: 100%;
        padding-left: 12px;
        font-family: Camphor,Open Sans,Segoe UI,sans-serif;
        text-align: left;
       cursor: pointer;
      border: none;
    outline: none;
    background: none;
      -webkit-transition: color .3s;
      transition: color .3s;
     height: 34px;
      transition:.5s;
    }
    .nav-pills-light .nav-link.active:before {
          content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(50,50,93,.11);
            overflow:hidden;
            z-index:-99;
            transform:scaleY(0);
            transform-origin:bottom;
            transition:transform 5s ease-in-out;
     }
     .nav-pills-light .nav-link.active:active:before {
        transform:scaleY(1);
            transform-origin:top;
    }

, пожалуйста, помогите мне добиться этого для справки, вы можете увидеть тот же эффект на stripe.com

Answer 1

С трудом понимая, о чем вы спрашиваете, но если вы говорите, что вам удалось достичь этого с помощью: hover, и чего добиться, также с помощью щелчка или активного, вам понадобятся две вещи:

1. также добавьте : активное и / или : фокус правило. Пример:

    .nav-link.active:before ,
    .nav-link:active:before ,
    .nav-link:hover:before  ,
    .nav-link:focus:before  {
        /*your same code here */ 
    };

2. Добавьте код для добавления класса .active к текущему элементу и удалите его из братьев и сестер (что, я полагаю, вам уже удалось сделать).

Кроме того, это правило неверно: оно относится к случаю, когда .nav-ссылка имеет класс .active , а также пользователь нажимает (удерживая нажатой кнопку) на элемент - вот что означает : active .

.nav-link.active: active: before {...}