Pill Tabs v1

Fancy pill tab buttons with fade in/out outlines.

by Travis Almand

HTML

<div class="track">
  <span class="item active">one</span>
  <span class="item">two</span>
  <span class="item">button</span>
  <span class="item">larger button</span>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.track {
  border: 1px solid gainsboro;
  border-radius: 30px;
  display: inline-block;
  height: 30px;
  margin: 20px;
}
.item {
  border: 1px solid transparent;
  border-radius: 30px;
  cursor: pointer;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  transition: all 0.25s;
}
.item:not(:first-child) {
  margin-left: -15px;
  position: relative;
}
.item.active {
  border: 1px solid gray;
}

JavaScript

var $items = document.querySelectorAll('.item');

for (var i = 0; i < $items.length; i++) {
	$items[i].addEventListener('click', function (e) {
  	document.querySelector('.active').classList.remove('active');
    e.target.classList.add('active');
  });
}