<main>

    <div class="Caous">

        <div class="Caous__hint">click to toggle</div>

        <div class="Caous__switcher">

            <label class="label label--isActive" id="filt-world">United States</label>

            <div class="toggle">

                <input type="checkbox" id="switcher" class="check">

                <b class="switch"></b>

            </div>

            <label class="label" id="filt-bangladesh">Bangladesh</label>

        </div>

        <div class="Caous__topic">

            <span class="Caous__clam" id="clam-pay">Pay</span>

            <span class="Caous__target" id="caous-target">P</span>

            <span class="Caous__clam">al</span>

        </div>

    </div>    

</main>

* 

    margin: 0

    padding: 0

    position: relative

    box-sizing: border-box

​

html, 

body 

    height: 100%

    font: 100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif

    color: black

    -webkit-font-smoothing: antialiased

​

main 

    position: absolute

    top: 50%

    left: 50%

    transform: translate3d(-50%, -50%, 0)

​

​

.Caous

    display: flex

    flex-direction: column

    align-items: center

    min-width: 320px

    &__hint

        font-size: 12px

        margin-bottom: -10px

        padding-left: 7px

    &__switcher

        display: inline-flex

        flex-direction: row

        align-items: center

    &__topic

        text-align: center

        font-size: 98px

        line-height: 1.11

        font-weight: bold

        font-style: italic

        display: inline-flex

    &__clam

        color: inherit

        transition: 1.2s cubic-bezier(0.785, 0.135, 0.150, 0.860)

        transition-property: color

        &--muted

            color: silver

    &__target

        transform: rotateX(0deg) skewX(0deg)

        position: relative

        width: 66px

        transition: 1s cubic-bezier(0.785, 0.135, 0.150, 0.860)

        transition-property: transform

        &--isEnd

            transform: rotateX(180deg) skewX(25deg)

​

​

.toggle, 

.label 

    display: inline-block

    vertical-align: middle

    margin: 10px

​

.label 

    font-size: 16px

    height: 40px

    line-height: 40px

    cursor: pointer

    color: silver

    transition: .2s

    &--isActive 

        color: black

​

.toggle 

    width: 80px

    height: 20px

    border-radius: 100px

    background-color: black

    overflow: hidden

    box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05)

​

.check 

    position: absolute

    display: block

    cursor: pointer

    top: 0

    left: 0

    width: 100%

    height: 100%

    opacity: 0

    z-index: 6

    &:checked 

        &~ .switch 

            right: 2px

            left: 60%

            transition: .25s cubic-bezier(0.785, 0.135, 0.150, 0.860)

            transition-property: left, right

            transition-delay: .08s, 0s

.switch 

    position: absolute

    left: 2px

    top: 2px

    bottom: 2px

    right: 60%

    background-color: #fff

    border-radius: 36px

    z-index: 1

    transition: .25s cubic-bezier(0.785, 0.135, 0.150, 0.860)

    transition-property: left, right

    transition-delay: 0s, .08s

    box-shadow: 0 1px 2px rgba(0,0,0,.2)

​

​

var w = document.getElementById("filt-world"),

    b = document.getElementById("filt-bangladesh"),

    s = document.getElementById("switcher"),

    c = document.getElementById("caous-target"),

    p = document.getElementById("clam-pay");

​

w.addEventListener("click", function(){

    s.checked = false;

    w.classList.add("label--isActive");

    b.classList.remove("label--isActive");

    c.classList.remove("Caous__target--isEnd");

    p.classList.remove("Caous__clam--muted");

});

​

b.addEventListener("click", function(){

    s.checked = true;

    b.classList.add("label--isActive");

    w.classList.remove("label--isActive");

    c.classList.add("Caous__target--isEnd");

    p.classList.add("Caous__clam--muted");

});

​

s.addEventListener("click", function(){

    b.classList.toggle("label--isActive");

    w.classList.toggle("label--isActive");

    c.classList.toggle("Caous__target--isEnd");

    p.classList.toggle("Caous__clam--muted");

})