Create background slide animations

Question

I made a group of buttons and I want the user to select each background button of the previous or next button to move / slide to the selected one, I made this effect with pure css and just used jquery to add or remove the active class. Now the problem is when you click the All button and then New works fine, but if you click Used , the slide will not work in the correct position.

For this effect, I used transition and ::before , I need to solve this with pure css or minimal jquery, not from javascript or jquery codes.

The logic for moving this background is:

 .RadioButton .btn:first-child::before { right: 0; transition: .3s all ease; } .RadioButton .btn:nth-child(2)::before { transition: .3s all ease; } .RadioButton .btn:last-child::before { left: 0; transition: .3s all ease; } 

The problem is .RadioButton .btn:nth-child(2)::before I cannot use right:0 or left:0 , because if I use each of them, the slide effect does not work in the correct position, any solution?

What I have tried so far:

 $('.RadioButton').each(function(){ $(this).find('.btn').each(function(){ $(this).click(function(){ $(this).parent().find('.btn').removeClass('btn-active'); $(this).addClass('btn-active'); }); }); }); 

 body { direction: rtl; } .RadioButton .btn { width: 33%; float: left; margin: 0; box-sizing: border-box; position: relative; font-size: 11px; min-height: 30px!important; line-height: 30px; border-radius: 5px; overflow: hidden; cursor: pointer; text-align: center; } .btn-default { border: 1px solid gray; color: gray; } .btn-group>.btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group>.btn:nth-child(2) { border-radius: 0; } .btn-group>.btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .RadioButton .btn::before { content: ""; height: 100%; width: 0%; background: gray; position: absolute; top: 0; transition: .3s all ease; z-index: -1; } .btn-active::before { width: 100%!important; } .RadioButton .btn:nth-child(2)::before { right: 0; transition: .3s all ease; } .RadioButton .btn:last-child::before { left: 0; transition: .3s all ease; } .btn-active:first-child::before { left: 0; transition: .3s all ease; } .btn-active:last-child::before { left: 0; transition: .3s all ease; } .btn.btn-default.btn-active { color: white; } .btn-group { clear: both; margin-top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="RadioButton btn-group" id="searchType"> <a class="btn btn-default" data-val="0">Used</a> <a class="btn btn-default" data-val="1">New</a> <a class="btn btn-default btn-active" data-val="2">All</a> </div> 

Answer 1

Set only one after the pseudo, on the last button. Now use the sibling selector and the active class to move it to the left as possible. (see last 2 styles in CSS)

 $('.RadioButton').each(function(){ $(this).find('.btn').each(function(){ $(this).click(function(){ $(this).parent().find('.btn').removeClass('btn-active'); $(this).addClass('btn-active'); }); }); }); 

 body { direction: rtl; } .RadioButton .btn { width: 33%; float: left; margin: 0; box-sizing: border-box; position: relative; font-size: 11px; min-height: 30px!important; line-height: 30px; border-radius: 5px; cursor: pointer; text-align: center; } .btn-default { border: 1px solid gray; color: gray; } .btn-group>.btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group>.btn:nth-child(2) { border-radius: 0; } .btn-group>.btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn.btn-default.btn-active { color: white; } .btn-group { clear: both; margin-top: 10px; } .RadioButton .btn:nth-child(3)::before { content: ""; height: 100%; width: 100%; background: gray; position: absolute; top: 0; transition: .3s all ease; z-index: -1; left: 0px; } .btn-active:first-child ~ .btn::before { transform: translateX(calc(-4px - 200%)); } .btn-active:nth-child(2) ~ .btn::before { transform: translateX(calc(-2px - 100%)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="RadioButton btn-group" id="searchType"> <a class="btn btn-default" data-val="0">Used</a> <a class="btn btn-default" data-val="1">New</a> <a class="btn btn-default btn-active" data-val="2">All</a> </div> 

Answer 2

change the center position

 $('.RadioButton').each(function(){ $(this).find('.btn').each(function(){ $(this).click(function(){ $(this).parent().find('.btn').removeClass('btn-active'); $(this).addClass('btn-active'); }); }); }); 

 body { direction: rtl; } .RadioButton .btn { width: 33%; float: left; margin: 0; box-sizing: border-box; position: relative; font-size: 11px; min-height: 30px!important; line-height: 30px; border-radius: 5px; overflow: hidden; cursor: pointer; text-align: center; } .btn-default { border: 1px solid gray; color: gray; } .btn-group>.btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group>.btn:nth-child(2) { border-radius: 0; } .btn-group>.btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .RadioButton .btn::before { content: ""; height: 100%; width: 0%; background: gray; position: absolute; top: 0; transition: .3s all ease; z-index: -1; left: 50%; transform: translateX(-50%); } .btn-active::before { width: 100%!important; } .RadioButton .btn:nth-child(2)::before { transition: .3s all ease; } .RadioButton .btn:last-child::before { transition: .3s all ease; } .btn-active:first-child::before { transition: .3s all ease; } .btn-active:last-child::before { transition: .3s all ease; } .btn.btn-default.btn-active { color: white; } .btn-group { clear: both; margin-top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="RadioButton btn-group" id="searchType"> <a class="btn btn-default" data-val="0">Used</a> <a class="btn btn-default" data-val="1">New</a> <a class="btn btn-default btn-active" data-val="2">All</a> </div>