DEV Community

Cover image for CSS hover & active & some tips
Etamar
Etamar

Posted on

CSS hover & active & some tips

Lets start and say CSS is an endless world of styling.
There is a serious amount of options that you can play with to get the styling that you want for your component/element,
I am not going to tell you about everything but I will tell you about the struggle that I had in my last project and how I managed to find the solution for it.

Name the class

Alt Text

I had a lot of struggle grabbing the specific element using the CSS file in my project so what do you see now is the final result of endless tryouts of naming the right element.
(I know using ID for the elements can be more specific but with React I find it easier with classNames).
Don’t think i did all this styling by myself, Google was a good friend and there was a lot of coping and pasting.

Devtools

Alt Text

I think the most fun part with CSS is that you can play with the DOM without changing your code and have all experiments that you want until you have the final product and just copy and past it in your VScode.
Alt TextAlt Text

hover & active

The big struggle that I had in my project (with styling) was that the button component that I was using from "MaterialUI"
was refusing to work with my simple onChange event,
So I decided to create the button on my own and do all the styling by myself.
Alt Text

I discovered how fun it can be with the "hover" & "active" selectors!
I managed to create a really nice Remove button that his color is fading and it has a click effect when you click it.
Alt TextAlt TextAlt Text

No doubt that i copied and paste a lot of it but there was a lot of playing around with it and i am very happy with the final result :)

resources

https://www.w3schools.com/css/css3_buttons.asp
https://www.w3schools.com/csSref/sel_hover.asp

Discussion (0)