CSS Hover | css hover effect | css button hover effects

CSS Hover | css hover effect | css button hover effects

CSS Hover | css hover effect | css button hover effects


Hey friends, today I'll  teach how to use the hover property in CSS and where to use it. Before we dive in, i'll introduce myself. I'm CodingPorium and I make coding tutorials and provide Free Source Code. Do check out my YouTube channel at here or by searching for CodingPorium on YouTube for more!

Introduction

So before entering, let's understand what is the hover property. The hover property is something common which you might have seen and used in many websites as it's an essential component in websites.

Generally, it's used for buttons but can also be used for other elements according to your own creativity. Here's a simple demo (from 0:00 to 0:22) :




Okay, now let's see the basic code for it first.

button hover effect CODE

For this selector, we first add the following code in HTML

<button>Hover Me!</button>

In our CSS, we will add the following code

button{
   color:black;
   background-color:white;
}
button:hover{
   color:gold;
   background-color:black;
}

The Output would be:


Now this is just the basics. Let's see how to upgrade these basic skills now.

button Fade Transition using Hover Selector

We can easily make a fade effect by adding the following line of code in our CSS for button (not the hover one):

button{
   color:black;
   background-color:white;
  transition:0.3s;
}
The Output would be:

Creative Ideas for :hover

Instead of just using :hover for links and buttons, you can also consider using it for other components. For example, a CSS card which enlarges in size when hovered. You can also use it for CSS Animations on Text. Besides, I've made a video tutorial last time on how to make CSS social media buttons with hover effects at here. Do explore methods of using these and your skills in :hover will get better. 

HTML - CSS project ideas by Code With Random

hover effect Browser Support

The most confusing thing in properties like this is browser support. :hover works in most modern browsers. However, for Internet Explorer you need to declare the <!DOCTYPE> if you're using :hover in elements besides the <a> element.


Check it more

calculator Html javascript | calculator javascript code

bootstrap navbar - responsive  bootstrap navbar 

notification CSS style | Html top bar slide down notification CSS

CSS responsive menu | CSS animated Menu

countdown timer HTML javascript | free countdown timer

A Custom checkbox in CSS? | Create a custom checkbox using CSS?

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html or comment down below any doubts or suggestion you have. Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random for giving me the chance to write here and I hope to see you all in future posts. Goodbye!

Written by: @codingporium

Post a Comment

Previous Post Next Post