zYYKZJJ

index.html

<div class="container mt-5">

<div class="pill-slider-container mx-auto">	
<div class="pill-btn-slider"></div>	
	
<div class="d-flex pill-btn-container">
	<div class="pill-btn one-year-btn"><span class="pill-btn-text">Dashboard<span></div>
	<div class="pill-btn two-years-btn"><span class="pill-btn-text">Marketplace</span></div>
	<div class="pill-btn three-years-btn"><span class="pill-btn-text">Hosting</span></div>
	<div class="pill-btn four-years-btn"><span class="pill-btn-text">Domain</span></div>
</div>
		
</div>
	
	
<div>

script.js

var tl = new TimelineMax();


$('.one-year-btn').on('click', function(){
	tl.to('.pill-btn-slider', .3, { right: 390 })
});

$('.two-years-btn').on('click', function(){
	tl.to('.pill-btn-slider', .3, { right: 260 })
});

$('.three-years-btn').on('click', function(){
	tl.to('.pill-btn-slider', .3, { right: 130 })
});

$('.four-years-btn').on('click', function(){
	tl.to('.pill-btn-slider', .3, { right: 0 })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

style.scss

body {
	background:#0069FF;
}


.pill-slider-container {
	position:relative;
	height:40px;
	width:520px;
	// background:orange;
}


.pill-btn-slider {
		width:130px;
		height:40px;
		line-height:40px;
		background:#0249C4;
		text-align:center;
		border-radius:40px;
		position:absolute;
}


.pill-btn-container {
	// background:blue;
	width:520px;
	.pill-btn {
		width:130px;
		height:40px;
		line-height:40px;
		// background:red;
		text-align:center;
		border-radius:40px;
		font-size:14px;
		font-weight:bold;
		cursor:pointer;
		color:#fff;
		.pill-btn-text {
			position:relative;
			z-index:1;
		}
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

zyykzjj.markdown

zYYKZJJ

A Pen by Matthew Daniel Brown on CodePen.

License.