CSS Events ?!

Toggle Event

input:checked + label{/*others styles*/}

Base HTML & CSS

<input type="checkbox" class="toggle-box" id="toggle-box1">
<label for="toggle-box1" class="boxy">CLICK ME</label>
.boxy{
/*box styles*/
display:block;
width:250px;
height:250px;
background-color:#ccc;

/*animation listener*/
transition:0.3s;
}

/*toggle changes*/
.toggle-box:checked + .boxy{
transform:translateX(250px); /*change position of box*/
background-color:#888; /*change color of the box*/
}
.toggle-box{
position:absolute; top:-99999px;
}

Click Event

.class-with-id-that-is-targeted:target{/*some styles*/}

Base HTML & CSS

<!--  link that will make the div element targeted -->
<a class="button" href="#Tab1-Cont">Item1</a>

<!-- targeted element when click on the link -->
<div class="box box1" id="Tab1-Cont">Item 1 Content</div>
.button{
/*button styles*/
width:120px;
height:30px;
border:solid 2px #000;
}

.box{
/*box styles*/
width:200px;
height:200px;
border:solid 1px #333;

/*animation listner*/
transition:0.3s;
}
/*box styles after click*/
.box:target{background-color:#660033; color:#fff;}

On Click Event

.some-class-on-click:active{/*some styles*/}

Base HTML & CSS

<div class="box"></div>
.box{
/*box styles*/
width:200px; height:200px;
background-color:#aaa;
border:solid 2px #000; border-radius:20px;
margin:0 auto;

/*animation listner*/
transition:1s;
}
/*On Click styles*/
.box:active{width:100px; height:100px;}
.box{transition:999999999s; }
.box:active{transition:5s; /*other changes styles*/}

On Focus & on Hover

Base HTML & CSS

<button>button1</button>
<button>button2</button>
<button>button3</button>
button{font-size:30px;}
button:focus{background-color:green; color:white;}
button:hover{background-color:red; color:white;}

Now Go Crazy!

--

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elad Shechter

Elad Shechter

CSS & HTML Expert

More from Medium

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

MDN Styling and Layout w/CSS chapter 11

Understanding CSS Flexbox — Jerry’s Tech Note

CSS Specificity