pure css animated tab switch

index.html

<main>
  <h1 class="text-center">Tab Switch</h1>

  <div class="wrapper">
    <div class="taeb-switch left text-center">
      <div class="taeb active" taeb-direction="left">List</div><!--
  --><div class="taeb" taeb-direction="right">Map</div>
    </div>
  </div>
</main>

pure-css-animated-tab-switch.markdown

pure css animated tab switch

an animated tab switch snippet

A Pen by Huseyin Elmas on CodePen.

License.

script.js

$(function() {
  var taeb = $(".taeb-switch");
  taeb.find(".taeb").on("click", function() {
    var $this = $(this);

    if ($this.hasClass("active")) return;

    var direction = $this.attr("taeb-direction");

    taeb.removeClass("left right").addClass(direction);
    taeb.find(".taeb.active").removeClass("active");
    $this.addClass("active");
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

/* taeb-switch styles */
.taeb-switch {
  position: relative;
}

.taeb-switch:after {
  content: "";
  position: absolute;
  width: 50%;
  top: 0;
  transition: left cubic-bezier(.88, -.35, .565, 1.35) .4s;
  border-radius: 27.5px;
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
  background-color: #3d90ef;
  height: 100%;
  z-index: 0;
}

.taeb-switch.left:after {
  left: 0;
}

.taeb-switch.right:after {
  left: 50%;
}

.taeb-switch .taeb {
  display: inline-block;
  width: 50%;
  padding: 12px 0;
  z-index: 1;
  position: relative;
  cursor: pointer;
  transition: color 200ms;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
}

.taeb-switch .taeb.active {
  color: #ffffff;
}

/* other styles */
html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

* {
  outline: 0;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: #ffffff;
  color: #3d90ef;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  text-align: center;
}

h1 {
  font-size: 38px;
  font-weight: bold;
  display: block;
  width: 100%;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 40px;
}

main {
  width: 100%;
}

.wrapper {
  border-radius: 37px;
  background-color: #f4f4f4;
  padding: 8px;
  width: 100%;
  max-width: 316px;
  margin-left: auto;
  margin-right: auto;
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" />