css transition between background gradient when checkbox is triggered

Question

I've been trying to make a toggleable button through css, and I've been wondering if there's a way to transition between these two states smoothly when the checkbox is clicked, I've managed to do it without animations but it'd be neat if it was possible to anime the transition

toggle-button {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 40px;

  margin-left: 100px;
}

.toggle-button input{
  opacity: 0;
  height: 0;
  width: 0;
}

.options-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: linear-gradient(to right, white 50%, gray 50%);
  border-radius:3px;
}

.button-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  height: 100%;
  width: 100%;

  background: linear-gradient(to right, black 50%, white 50%);
  -webkit-background-clip: text;
  -webkit-transition: .4s;
  transition: .4s;

  cursor: pointer;
}

.toggle-button input:checked + .options-wrapper {
  background: linear-gradient(to right, gray 50%, white 50%);
}

.toggle-button input:checked + .options-wrapper > .button-options {
  background: linear-gradient(to right, white 50%, black 50%);
  -webkit-background-clip: text;

}

@keyframes shiftOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

.button-options > p {
  color: transparent
}

<label class="toggle-button">
    <input type="checkbox">
    <div class="options-wrapper">
        <div class="button-options">
            <p>Daily</p>
            <p>Hourly</p>
       </div>
    </div>
</label>

Please provide your CSS for the buttons so that we can modify the existent styles. — BSdoukos, Aug 31 '21 at 21:03
@ontley see how to create a [reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — Brandon, Aug 31 '21 at 21:13
Be aware, this should be a radio input type https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio — otherwise you're going to need to add significant ARIA attributes. — franklylately, Aug 31 '21 at 21:19
@Brandon there's no reproducible problem, it's just a question about whether or not, and in what way I could achieve an animation between linear gradients, all the code needed for the current button is given in the post — ontley, Aug 31 '21 at 21:20
@mr_joncollette Ahh nice to know, thank you for the suggestion I'll try to convert it to radio buttons later — ontley, Aug 31 '21 at 21:24
@ontley There is indeed a reproducible issue here as you have linked off-site for part of your question. That's not ok in SO. Please add the code here so we can help you. We don't know what the copyright of your off-site code is. — Dominik, Aug 31 '21 at 21:53
There's no copyright on the code, the entire reason I linked css with hastebin is because I don't think a 50 line css file in a question makes it worth to even interact with a post or read through it if someone has a similar need — ontley, Aug 31 '21 at 22:08
Does this answer your question? [Use CSS3 transitions with gradient backgrounds](https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — BSdoukos, Aug 31 '21 at 22:50

score 1 · Accepted Answer · answered Sep 01 '21 at 10:03

This seems to work, i created a background div that goes back and forth when the input is checked, i also changed how the text change colors.

toggle-button {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 40px;

  margin-left: 100px;
}

.toggle-button input{
  opacity: 0;
  height: 0;
  width: 0;
}

.options-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  border-radius:3px;
}

.button-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: gray;

  cursor: pointer;
  position: relative;
 }


.button-options .bg {
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  background: gray;
  transition: .5s ease-in-out;
}

.toggle-button input:checked + .options-wrapper .bg {
  left: 50%;
}

.toggle-button input + .options-wrapper p:first-of-type {
color: white;
}

.toggle-button input:checked + .options-wrapper p:first-of-type {
  color: gray;
}

.toggle-button input:checked + .options-wrapper p:last-of-type {
  color: white;
}

.button-options p {
  position: relative;
  transition: .5s ease-in-out;
}

<label class="toggle-button">
    <input type="checkbox">
    <div class="options-wrapper">
        <div class="button-options bg-left">
            <div class="bg"></div>
            <p>Daily</p>
            <p>Hourly</p>
       </div>
    </div>
</label>

css transition between background gradient when checkbox is triggered

1 Answers1