DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS Hover Effect
Hrushikesh Kokardekar
Hrushikesh Kokardekar

Posted on

CSS Hover Effect

Hello Guy's and Welcome to another topic on CSS.

How many times have seen on any website that whenever you move your cursor on any button the color of button changes or the size of the button increases or decreases. And as you move away your cursor from the button , the button regains it's previous property.

How Cool is that!!!

This is all done with the help of CSS Hover Effect!!!

Using CSS property you can apply styles on an element on mouse over.

Today I will be showing you how to use hover effect and will also talk about transition property and will be showing you how to convert a square into a circle on mouse over.

Let's Start 😎😎

As I will be converting a square into a circle therefore I need to start by creating a square .

Step : 1 HTML
In your html file inside the body tag create one empty div as shown below.
Alt Text

Step : 2 CSS (Creating Square)
In your stylesheet or style tag write the div element and give it height, width, border, background-color and margin. You can see the snippet of the code below .
Alt Text

You might have noticed that along with other properties I've also used a property "transition".
Basically transition property is used perform some changes smoothly according to the time you have given . You can see that I've given duration for width and height as 8 seconds. This means my width height will require 8 seconds to change to it's new value. So that's was about transition property but we still have lot of work to do.

So now our Square is created and should like:
Alt Text

Step : 3 CSS (Hover)
Syntax for hover property is element:hover. In our case the element is div . So our code goes as follows:
Alt Text

Now another new property that I've used is border-radius. This property provides us to style corner's of selected element. So by providing border-radius as 50% all the corner's of our square will be styled and it will be converted into circle.

So that's it with the code and it's time to see our square get converted into circle.

Let's see the output😎😎 :

Alt Text

So I think that you all are clear with the code and also some topic covered. We saw some properties like transition and border-radius properties that are very much helpful in styling.

If you all want to know about the Types of CSS then please have a look on my previous post.

So that's it for Today and will meet you all in next post 😊😊.
Till then Happy Coding πŸ‘©β€πŸ’»πŸ‘©β€πŸ’».

Top comments (6)

Collapse
darkwiiplayer profile image
π’Š©Wii πŸ’–πŸ’›πŸ’šπŸ’™πŸ’œπŸ’πŸ’Ÿ

This is a nitpick, but hover is not a "property".

If it was a property, you'd set it like hover: true; but it's not, it's a pseudoclass, aka. it works like a class, but you can't set this class yourself (instead, the browser toggles the pseudoclass on its own when the user hovers over the element)

Collapse
hrushikesh41 profile image
Hrushikesh Kokardekar Author

Thanks for your feedback and will surely Look into it

Collapse
faithhvacsteve profile image
Stephen H Veach

Good job ! I’m right at this same spot I’m my development stage for β€œtransitions and transformations” . Was helpful and simple. Thanks

Collapse
hrushikesh41 profile image
Hrushikesh Kokardekar Author

Thanks for appreciation 😊

Collapse
adam_cyclones profile image
Adam Crockett

It's nice to see enthusiasm such as yours, keep going πŸ‘

Collapse
hrushikesh41 profile image
Hrushikesh Kokardekar Author

Thank You 😊

🌚 Life is too short to browse without dark mode