How do I make the animation of these buttons work?

All we need is an easy explanation of the problem, so here it is.

I wanted to know if you could help me, my code doesn’t work, I’m trying to make an animated button when clicked, but it doesn’t work. I think because the button box has the background color divided into gradients, but I would like not to remove this detail. This code I got from another post on the site but I can’t get it to work.

Thank you very much!!

.btn-group1 button {
  border-radius: 8px;
  background-color: #fff; 
  border: 1px;
  border-style: solid;
  border-color: #c1cfdc;
  color: black; 
  padding: 8px 35px;
  cursor: pointer;
  float: left;
  font-family: Verdana;
  color: #415971;
  background-image: linear-gradient(white 65%, #f4f6fb 50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-group1 button:after {
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-group2 button {
  border-radius: 8px;
  background-color: #fff; 
  border: 1px;
  border-style: solid;
  border-color: #c1cfdc;
  color: black; 
  padding: 8px 35px;
  cursor: pointer;
  float: left;
  font-family: Verdana;
  color: #415971;
  background-image: linear-gradient(white 65%, #f4f6fb 50%);
}

.btn-group3 button {
  border-radius: 8px;
  background-color: #fff; 
  border: 1px;
  border-style: solid;
  border-color: #c1cfdc;
  color: black; 
  padding: 8px 35px;
  cursor: pointer;
  float: left;
  font-family: Verdana;
  color: #415971;
  background-image: linear-gradient(white 65%, #f4f6fb 50%);
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group1 button:hover {
  background-color: #f4f6fb;
}

.btn-group2 button:hover {
  background-color: #f4f6fb;
}

.btn-group3 button:hover {
  background-color: #f4f6fb;
}
<!Doctype html>
<html>
<body>

<div class="btn-group1"><button>Essential<br><br> 33.00€<br><br><br> 20 steli</button></div>
<div class="btn-group2"><button>Deluxe<br><br>39.00€ <br><br><br>25 steli</button></div>
<div class="btn-group3"><button>Supreme<br><br>42.00€ <br><br><br>30 steli</button></div>

</body>
</html>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You should add background-image: none; to your hovers

.btn-group1 button {
  border-radius: 8px;
  background-color: #fff; 
  border: 1px;
  border-style: solid;
  border-color: #c1cfdc;
  color: black; 
  padding: 8px 35px;
  cursor: pointer;
  float: left;
  font-family: Verdana;
  color: #415971;
  background-image: linear-gradient(white 65%, #f4f6fb 50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-group1 button:after {
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-group2 button {
  border-radius: 8px;
  background-color: #fff; 
  border: 1px;
  border-style: solid;
  border-color: #c1cfdc;
  color: black; 
  padding: 8px 35px;
  cursor: pointer;
  float: left;
  font-family: Verdana;
  color: #415971;
  background-image: linear-gradient(white 65%, #f4f6fb 50%);
}

.btn-group3 button {
  border-radius: 8px;
  background-color: #fff; 
  border: 1px;
  border-style: solid;
  border-color: #c1cfdc;
  color: black; 
  padding: 8px 35px;
  cursor: pointer;
  float: left;
  font-family: Verdana;
  color: #415971;
  background-image: linear-gradient(white 65%, #f4f6fb 50%);
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group1 button:hover {
  background-color: #f4f6fb;
  background-image: none;
}

.btn-group2 button:hover {
  background-color: #f4f6fb;
  background-image: none;
}

.btn-group3 button:hover {
  background-color: #f4f6fb;
  background-image: none;
}
<!Doctype html>
<html>
<body>

<div class="btn-group1"><button>Essential<br><br> 33.00€<br><br><br> 20 steli</button></div>
<div class="btn-group2"><button>Deluxe<br><br>39.00€ <br><br><br>25 steli</button></div>
<div class="btn-group3"><button>Supreme<br><br>42.00€ <br><br><br>30 steli</button></div>

</body>
</html>

Method 2

i think whats making the problem is this line:

background-image: linear-gradient(white 65%, #f4f6fb 50%);

try deleting it

Method 3

The background-color is beneath the background-image. Even if you change it you wouldn’t see it. You can use:

.btn-group1 button:hover {
  background-color: #f4f6fb;
  background-image: none;

}

or something like:

.btn-group1 button:hover {
  
  background-image: linear-gradient(#f4f6fb, #f4f6fb);
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

Leave a Reply