0Hello all today we will learn to make an awesome and easy button hover and transition effect.
1) Lets make a basic html button.
2) We have created a basic html 5.0 button, lets style it up with CSS, in ur css file -
button {
padding:5px 10px 5px 10px;
//comment - padding given is always clockwise padding: top right bottom left
//comment - lets add another features of css
border: 1px solid darkgreen;
background-color:darkgreen;
color:#ffffff; //comment - #ffffff stands for white color in hexadecimal
}
3) Now the important part, lets add the hover pseudo class for button
button:hover{
padding:5px 20px 5px 20px;
//comment - increase the right and left padding for our button
}
4)Now we the padding changes of the button when we hover over the mouse to the button, but the effect is instant. Lets try to add smmothness to that process by adding transition
button {
padding:5px 10px 5px 10px;
border: 1px solid darkgreen;
background-color:darkgreen;
color:#ffffff;
transition:all 0.5s ease; //comment - the transition time is 0.5 seconds, i.e when we hover over the mouse to the button, in 0.5 seconds the padding will increase from 10px to 20px.
}
5) So thats it, you have created an awesome hoverover button. Below is the full code
i) HTML 5.0 code -
ii) CSS 3.0 code -
button {
padding:5px 10px 5px 10px;
border: 1px solid darkgreen;
background-color:darkgreen;
color:#ffffff;
transition:all 0.5s ease;
}
button:hover{
padding:5px 20px 5px 20px;
}
---thank you---
