onclick effect using just css

Question

I'm trying to increases my skill on html and CSS, i wanted to have on click effect using just css. i know the way to do so using JavaScript put wondering if there is a way to do so using just css

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #3faf82;
  border-radius: 10px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.box:hover {
  cursor: pointer;
}

.box:active span:nth-child(1) {
  transform: translate3d(0, 25px, 0) rotate(45deg);
}

.box:active span:nth-child(2) {
  opacity: 0;
}

.box:active span:nth-child(3) {
  transform: translate3d(0, -25px, 0) rotate(-45deg);
}

span {
  margin: auto;
  height: 10px;
  width: 110px;
  background-color: #ffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

<div class="frame">
  <div class="center">
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>

  </div>
</div>

I thought :active CSS pseudo-class would work but the effect only lasts when your clicking it if not clichéd it goes back to normal. my desired result is on one click to change on another cilice to go back to the original style. is that possible to be obtained using just CSS or am i wasting my time.

Your best option would be to add an onclick effect where you add or remove a class in javascript: w3schools.com/howto/howto_js_remove_class.asp — Nemoko
– Nemoko, Commented Jan 5, 2023 at 11:52
You could use a checkbox and label if you are wanting pure css - then you can style things with input:checked and either sibling combinators - + or ~ — Pete
– Pete, Commented Jan 5, 2023 at 11:56

Andriu1510 · Accepted Answer · 2023-01-05 15:00:12Z

Yes, it is possible using an invisible input type checkbox so that with the pseudo class checked it acts as a trigger to activate and deactivate the animation, as follows:

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #3faf82;
  border-radius: 10px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  z-index: 1;
}
#label{
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200%;
  height: 200%;
  cursor: pointer;
  z-index: 10;
}

#toggle:checked + label + .box span:nth-child(1) {
  transform: translate3d(0, 25px, 0) rotate(45deg);
}

#toggle:checked + label + .box span:nth-child(2) {
  opacity: 0;
}

#toggle:checked + label + .box span:nth-child(3) {
  transform: translate3d(0, -25px, 0) rotate(-45deg);
}

#toggle {
  display:none;
}

span {
  margin: auto;
  height: 10px;
  width: 110px;
  background-color: #ffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

<div class="frame">
  <div class="center">
    <input id='toggle' type='checkbox'>
    <label for='toggle' id="label"></label>
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

@Pete You are absolutely right, now I am looking for an alternative solution, thanks.

Collectives™ on Stack Overflow

onclick effect using just css

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related