Make background slide as a pill when clicked

Question

I'm trying to do a small animation when I click my button.

I want the background to slide left and right in order to illustrate the user choice.

Here is my trial : JSFiddle

$(".test").click(function() {
  $(".test").removeClass('active');
  $(this).addClass('active');
})

div{
  list-style-type: none;
}
div a {
  text-decoration: none;
}
#cont {
  background-color: white;
  width: 100%;
  padding: 2px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice {
  float: left;
  margin-right: 1px;
}
.choice div{
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  background: #ff3232;
  margin-left: 10px;
  transition: all 0.4s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice .left {
  background: linear-gradient(to right, white 50%, #b7d4e1 50%);
  background-size: 200% 100%;
  background-position: left bottom;
}
.choice .right {
  background: linear-gradient(to right, #b7d4e1 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.choice .left.active {
  background-position: right bottom;
}
.choice .right.active {
  background-position: left bottom;
}
.choice div a {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choice">
  <div id="cont">
    <div class="test left active"><a href="#">Semaine</a>
        </div>
    <div class="test right"><a href="#">Mois</a>
        </div>
  </div>
</div>

But I want that the background to stay pill-shapped all the slide long.

Answer 1

You can make a pill highlight the clicked element without JS depending on your usecase.
The point is to use CSS transitions and play with the transition delay so that the pill stays under the last focused link.

The pill is made with an extra span and border-radius. It is translated under the focused link:

.choice{
  background-color: white;
  float: left;
  padding: 2px;
  height: 40px;
  border-radius: 20px;
  position:relative;
  z-index:1;
}
.link {
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  text-decoration:none;
  color:#000;
}
.pill{
  position:absolute;
  left:16px; top:0;
  width:100px; height:100%;
  background:#B7D4E1;
  border-radius:20px;
  z-index:-1;
  transition: 9999s transform .2s ease-out;
}
.link:nth-child(2):focus ~ .pill{
  transform: translatex(132px);
  transition: transform .18s ease-out;
}
.link:nth-child(1):focus ~ .pill{
  transform: translatex(0px);
  transition: transform .18s ease-out;
}

<div class="choice">
  <a class="link" href="#">Semaine</a>
  <a class="link" href="#">Mois</a>
  <span class="pill"></span>
</div>

Answer 2

https://jsfiddle.net/danvim/4jxc91dq/1/

I redid your structure, and used a 3d translation for the pill.

$(function(){
  $(".choice button").click(function() {
  	  $(this).closest(".cont").removeClass("left right");
    if ($(this).hasClass("left")) {
  	  $(this).closest(".cont").addClass("left");
    } else {
  	  $(this).closest(".cont").addClass("right");
    }
  })
})

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

body {
  background:#ccc;
}

span {
  list-style-type: none;
}

span a {
  text-decoration: none;
}

.cont {
  background-color: white;
  width: 100%;
  padding: 5px;
  border-radius: 25px;
}

.cont::before {
  content: " ";
  background:#B7D4E1;
  width: 100px;
  height:40px;
  border-radius: 20px;
  position:absolute;
  top:5px;
  left:5px;
  transition: all 0.2s ease-out;
}

.choice {
  float: left;
  margin-right: 1px;
}

.choice button {
  color: #000;
  width: 100px;
  height:40px;
  border:0;
  display:inline-block;
  text-align: center;
  background: transparent;
  transition: all 0.4s linear;
  border-radius: 20px;
  position:relative;
}

.choice .cont.right::before {
  transform: translate3d(105px,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="choice">
  <div class="cont left">
    <button type="button" class="left">Semaine</button>
    <button type="button" class="right">Mois</button>
  </div>
</div>

If you want to convert radio forms to the element, you can try to extending the jQuery:

$(function(){
  $.fn.extend({
    makeRadio: function(){
      var temp = '<div class="choice"';
      var temp1 = '><div class="cont left">';
      var temp2 = '<button type="button" class="';
      var temp3 = '</button> ';
      var temp4 = '</div></div>';
      var $form = $(this);
      var $items = $form.children("input[type='radio']");
      var id = $form.attr("id");
      if ($items.length == 2) {
        var output = temp + ' id="' + id + '"' + temp1;
        for(var i = 0; i <2; i++) {
          output += temp2 + (i == 0 ? "left" : "right") + '" data-value="'+ $($items[i]).attr("value") + '">' + $($items[i]).attr("data-display") + temp3;
        }
        output += temp4;
        $form[0].outerHTML = output;
        console.log("#"+id+" button");
        $("#"+id+" button").click(function() {
  	      $(this).closest(".cont").removeClass("left right");
          if ($(this).hasClass("left")) {
  	        $(this).closest(".cont").addClass("left");
          } else {
  	        $(this).closest(".cont").addClass("right");
          }
        });
      }
    }
  });
  $("#convert").click(function(){$("#radios").makeRadio();})
  
  
})

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

body {
  background:#ccc;
}

span {
  list-style-type: none;
}

span a {
  text-decoration: none;
}

.cont {
  background-color: white;
  width: 100%;
  padding: 5px;
  border-radius: 25px;
}

.cont::before {
  content: " ";
  background:#B7D4E1;
  width: 100px;
  height:40px;
  border-radius: 20px;
  position:absolute;
  top:5px;
  left:5px;
  transition: all 0.2s ease-out;
}

.choice {
  float: left;
  margin-right: 1px;
}

.choice button {
  color: #000;
  width: 100px;
  height:40px;
  border:0;
  display:inline-block;
  text-align: center;
  background: transparent;
  transition: all 0.4s linear;
  border-radius: 20px;
  position:relative;
}

.choice .cont.right::before {
  transform: translate3d(105px,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="convert">Convert to animated pill</button>
<form id="radios">
  <input type="radio" name="gender" value="male" data-display="Gentleman">
  <input type="radio" name="gender" value="female" data-display="Lady">
</form>