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>
>Solution :
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>