Активен на наклонной кнопке с анимацией

Question

Я пытаюсь сделать кнопку, подобную той, что ниже, которая при нажатии медленно перемещает цвет к активной кнопке.

Я взял изображение от здесь

Пока я сделал это скрипка

<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>
</ul>

код CSS

  a,ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  * {
    font-family: Arial, Helvetica;
    font-size: 12px;
  }

  li {
    position: relative;
    line-height: 40px;
    float: left;
    margin-right: -1px;
    padding: 0 15px;
  }

  li {
    display: block;
    color: blue;
    text-align: center;
  }

  a:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #fff;
    z-index: -1;
    transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
  }

  li:hover a:before {
    background: green;
  }

  li:hover a {
    color: #aaa;
  }

  li a.selected:before {
   content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #fff;
    z-index: -1;
    transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
  }

  .selected a {
    color: #fff;
  }

  .selected {
    background-color: #10acdf;
  }

  ul {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: -webkit-inline-box;
    border: 1px solid #10acdf;
    overflow: hidden;
    background-color: transparent;
    font-size: 14px;
    font-weight: bold;
  }

JQuery

$('li').on('click', function() {
$('li').removeClass('selected');
$(this).addClass('selected');
});

наведение работает как изображение, но когда кнопка активна, кнопка покрыта прямоугольником, а не как изображение (наклонное / наклонное), которое я опубликовал. И как я могу работать с анимацией, чтобы переместиться в сторону где он активен. У меня 2 проблемы.

Answer 1

Для первого выпуска вам просто нужно добавить цвет к псевдоэлементу, а не к элементу:

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});

a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  position: relative;
  line-height: 40px;
  float: left;
  margin-right: -1px;
  padding: 0 15px;
}

li {
  display: block;
  color: blue;
  text-align: center;
}

a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);
  
}

li:hover a:before {
  background: green;
}

li:hover a {
  color: #aaa;
}

li.selected a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #10acdf;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);

}

.selected a {
  color: #fff;

}
ul {
  border-radius: 25px;
  display:inline-block;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>


</ul>

В части анимации вы можете рассмотреть только один псевдоэлемент, примененный к ul, который вы перемещаете, в зависимости от элемента, по которому щелкнули.

Вот идея, в которой я настраиваю положение псевдоэлемента и его ширину с учетом выбранного li. Я также использовал переменную CSS, чтобы иметь возможность управлять псевдоэлементом, используя jQuery :

$('ul').css('--w', $('li.selected').outerWidth());

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
  $('ul').css('--l', $(this).position().left);
  $('ul').css('--w', $(this).outerWidth());
});

a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  line-height: 40px;
  float: left;
  padding: 0 15px;
  color: blue;
  text-align: center;
}

ul {
  position: relative;
  border-radius: 25px;
  display: inline-block;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}

ul:before {
  content: '';
  position: absolute;
  top: 0;
  width: var(--w, 0px);
  bottom: 0;
  left: var(--l, 0);
  background: #10acdf;
  z-index: -1;
  transform: skew(-15deg, 0);
  cursor: pointer;
  transition: 1s all;
}

.selected a {
  color: #fff;
  transition: 1s all;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>
</ul>