0

I am trying to make a button like the one below which on click moves the color slowly to the active button.

Active button with animation

I took the image from here

So far i have done this fiddle

<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>
</ul>

css code

  a,ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  * {
    font-family: Arial, Helvetica;
    font-size: 12px;
  }

  li {
    position: relative;
    line-height: 40px;
    float: left;
    margin-right: -1px;
    padding: 0 15px;
  }

  li {
    display: block;
    color: blue;
    text-align: center;
  }

  a:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #fff;
    z-index: -1;
    transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
  }

  li:hover a:before {
    background: green;
  }

  li:hover a {
    color: #aaa;
  }

  li a.selected:before {
   content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #fff;
    z-index: -1;
    transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
  }

  .selected a {
    color: #fff;
  }

  .selected {
    background-color: #10acdf;
  }

  ul {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: -webkit-inline-box;
    border: 1px solid #10acdf;
    overflow: hidden;
    background-color: transparent;
    font-size: 14px;
    font-weight: bold;
  }

jquery

$('li').on('click', function() {
$('li').removeClass('selected');
$(this).addClass('selected');
});

the hover is working like the image but when the button is active, the button is covered in rectangle but not as the image(angled/slanted) i have posted.And how can i work with the animation to move to the side where it is active.I am facing 2 problems.

taufeeq zaman
  • 37
  • 2
  • 8

1 Answers1

1

For the first issue, you simply need to add the color to the pseudo element and not the element:

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});
a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  position: relative;
  line-height: 40px;
  float: left;
  margin-right: -1px;
  padding: 0 15px;
}

li {
  display: block;
  color: blue;
  text-align: center;
}

a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);
  
}

li:hover a:before {
  background: green;
}

li:hover a {
  color: #aaa;
}

li.selected a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #10acdf;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);

}

.selected a {
  color: #fff;

}
ul {
  border-radius: 25px;
  display:inline-block;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>


</ul>

For the animation part, you can consider only one pseudo element applied to the ul that you move depending on the clicked element.

Here is an idea where I adjust the position of the pseudo element and its width considering the selected li. I also used CSS variable to be able to control the pseudo element using jQuery:

$('ul').css('--w', $('li.selected').outerWidth());

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
  $('ul').css('--l', $(this).position().left);
  $('ul').css('--w', $(this).outerWidth());
});
a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  line-height: 40px;
  float: left;
  padding: 0 15px;
  color: blue;
  text-align: center;
}

ul {
  position: relative;
  border-radius: 25px;
  display: inline-block;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}

ul:before {
  content: '';
  position: absolute;
  top: 0;
  width: var(--w, 0px);
  bottom: 0;
  left: var(--l, 0);
  background: #10acdf;
  z-index: -1;
  transform: skew(-15deg, 0);
  cursor: pointer;
  transition: 1s all;
}

.selected a {
  color: #fff;
  transition: 1s all;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>
</ul>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415