Awesome HTML and CSS hover button with transition effects

Hello all today we will learn to make an awesome and easy button hover and transition effect.

1) Lets make a basic html button.

Click me

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 -


Click me

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---