Essential CSS Tips and Tricks

Hover Effects

HTML Code:

<button>Hover Over Me</button>

CSS Code:

button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

CSS Fade-in Effect on Hover

button{
opacity:0.5;
}
button:hover{
opacity:1;
}

CSS Grow-in Effect on Hover

button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}