How do I make the animation of these buttons work?-CodePudding

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 ><button>Essential<br><br> 33.00€<br><br><br> 20 steli</button></div>
<div ><button>Deluxe<br><br>39.00€ <br><br><br>25 steli</button></div>
<div ><button>Supreme<br><br>42.00€ <br><br><br>30 steli</button></div>

</body>
</html>

CodePudding user response：

i think whats making the problem is this line:

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

try deleting it

CodePudding user response：

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 ><button>Essential<br><br> 33.00€<br><br><br> 20 steli</button></div>
<div ><button>Deluxe<br><br>39.00€ <br><br><br>25 steli</button></div>
<div ><button>Supreme<br><br>42.00€ <br><br><br>30 steli</button></div>

</body>
</html>