0
<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
  <div class="spinner diagonal part-1"></div>
  <div class="spinner horizontal"></div>
  <div class="spinner diagonal part-2"></div>
</label>

CSS Code →

body {margin:50px;}

* {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}

#spinner-form {display:none;}

.spinner-spin {position:relative;float:left;height:50px;width:50px;}
.spinner-spin {cursor:pointer;}

.spinner-spin > .spinner {height:5px;width:50px;background-color:#000;}

.spinner-spin > .spinner.diagonal.part-1 {position:relative;float:left;margin-top:10px;}
.spinner-spin > .spinner.horizontal {position:relative;float:left;margin-top:6px;}
.spinner-spin > .spinner.diagonal.part-2 {position:relative;float:left;margin-top:6px;}

#spinner-form:checked ~ .spinner-spin > .horizontal {opacity: 0;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(225deg);-webkit-transform:rotate(225deg);margin-top:23px;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-225deg);-webkit-transform:rotate(-225deg);margin-top:-16px;}

The same could be found here on the Code Pen.io

My Question: → There are pseudo classes such as → a:hover,

But here we do not have a hover effect, but a click effect so how is click effect generated just through the plain CSS w/o using and Javascript or JQuery. which part of the CSS is actually causing a click effect? Is it that simple ir I am missing something.

ALTERNATIVE QUESTION →

Are there any pseudo classes to get the click functionality w/o the JQuery.?

WordCent
  • 725
  • 3
  • 18

2 Answers2

0

It is a checkbox,

<input type="checkbox" id="spinner-form" />

:checked pseudo class is responsible for animation

#spinner-form:checked ~ .spinner-spin > .horizontal {opacity: 0;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(225deg);-webkit-transform:rotate(225deg);margin-top:23px;}
#spinner-form:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-225deg);-webkit-transform:rotate(-225deg);margin-top:-16px;}
JuniorDev
  • 1,170
  • 2
  • 9
  • 19
0

Well, it's the fake click effect which is often called as the checkbox hack but is not quite accessibility-friendly.

In the codepen demo you shared, the menu-icon is placed inside a label which is responsible for the action on the checkbox input as you may have already noticed in the markup.

Related: Using text labels to associate with form controls...

In the CSS styles, the checkbox is used in such a way (using :checked) that it's direct neighbor (i.e. the label and/or elements inside the label) can be styled on check-on (checked) and check-off (unchecked) states.

All in all, it's creating a click effect using: * A trigger (menu-icon) inside a label which is responsible for a checkbox input in the neighborhood to change states * Label is then styled with CSS based on the states of the checkbox

You may read more about it here if you want.

Rahul
  • 822
  • 6
  • 12
  • Basically it is a kind of Hack? Are there any pseudo classes to get the click functionality w/o Jquery or Javascript? You still there? – WordCent Mar 17 '17 at 11:21
  • Well, not exactly for clicking, but there is one pseudo classes you may find helpful. `:focus` I'm talking about. But with it too, the clicked state will be gone as soon as you focus or click somewhere else. – Rahul Mar 17 '17 at 11:34
  • I got it I have accepted your answer for the actual posted question. Dont know why this question is marked as duplicate because it is not duplicate. – WordCent Mar 17 '17 at 11:38
  • 1
    Questions that point to similar answers are often marked as duplicates here. Don't worry, you still get people to answer your questions. Cheers :-) – Rahul Mar 17 '17 at 11:44
  • Cheers! People rarely upvote here, but quite often downvote. Isn't It? Nice place, but sometimes aimlessly ruthless. – WordCent Mar 17 '17 at 11:47
  • 1
    I agree with you. It's ridiculous to see people downvoting here for no reason. Doesn't really add any value at all to the community. – Rahul Mar 17 '17 at 11:51
  • Yes, and it sometimes demotivate to the posters who are actually not spammers, but a serious seekers and learners. – WordCent Mar 17 '17 at 11:53
  • 1
    Don't worry about the downvotes here anyway. There are many others too, who are serious about sharing, helping, and learning. They too might have experienced the same thing. Keep on learning, sharing, and helping other folks :-) – Rahul Mar 17 '17 at 12:04