CODEWITHSUNDEEP
cssanimationbutton
Learner
Learner

Reputation: 43

Animated Buttons CSS

$("button").click(function(){
  $("button").removeClass("selected");

  $(this).addClass("selected");

  var dataFilter = $(this).data('filter');

  if(dataFilter == "all") {
      $(".elements tr").show();
  }
  else
  {
    $(".elements tr").hide();
    $("." + dataFilter).show();
  }
});

enter image description hereI have created an animation for single button(SHOW ALL) but the effect is shown on second as well which I haven't done style yet. Another issue here is when I click the second button(NATURE), the first goes to plain-like button. How to get rid of this.

.selected{
  display: inline-block;
  border-radius: 3px;
  background-color: orange;
  border:none;
  color:white;
  text-align: center;
  font-size: 20px;
  padding:20px;
  width:200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.selected span{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: 0.5s
}
.selected span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.selected:hover span {
  padding-right: 25px;
}

.selected:hover span:after {
  opacity: 1;
  right: 0;
}
<div class="btn-group">
    <button class="selected" data-filter="all" style="vertical-align:middle"><span>Show All</span></button>
    <button data-filter="nature" class="btn2" style="margin-left:7px;" >NATURE</button>
    <!--<button data-filter="people" class="btn2" style="vertical-align:middle">PEOPLE</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">CITIES</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">MISS</button>-->
  </div>

Screen shot of problem mentionedfirst images with show all button[![][1]]3

Upvotes: 0

Views: 202

Answers (1)

WizardCoder
WizardCoder

Reputation: 3461

It is hard to tell exactly what is going on because your code doesn't reproduce the issue you are having. However I do have an idea of what is happening.

You are selecting the Show All button by the class .selected. It is likely that when you select the Nature button the .selected class is being removed from the Show All button and being applied to the Nature button. (You can check this by inspecting the buttons by using the browsers developer console, and seeing if the classes change when you click on them)

If the .selected class is alternating between the buttons you can add a unique class to the Show all button and select it using that class. However if you don't have the ability to add a unique class to the Show All button you can select the unique data-filter attribute.

[data-filter="all"] {
  display: inline-block;
  border-radius: 3px;
  background-color: orange;
  border:none;
  color:white;
  text-align: center;
  font-size: 20px;
  padding:20px;
  width:200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

[data-filter="all"] span{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  transition: 0.5s
}
[data-filter="all"] span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

[data-filter="all"]:hover span {
  padding-right: 25px;
}

[data-filter="all"]:hover span:after {
  opacity: 1;
  right: 0;
}
<div class="btn-group">
    <button class="selected" data-filter="all" style="vertical-align:middle"><span>Show All</span></button>
    <button data-filter="nature" class="btn2" style="margin-left:7px;" >NATURE</button>
    <!--<button data-filter="people" class="btn2" style="vertical-align:middle">PEOPLE</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">CITIES</button>
    <button data-filter="cities" class="btn2" style="vertical-align:middle">MISS</button>-->
  </div>

Upvotes: 1

Related Questions