UrbanPro
true

Find the best tutors and institutes for CSS

Find Best CSS Training

Please select a Category.

Please select a Locality.

No matching category found.

No matching Locality found.

Outside India?

Search for topics

Awesome HTML and CSS hover button with transition effects

Akshay Khobragade
20/01/2017 0 0

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

 

0 Dislike
Follow 0

Please Enter a comment

Submit

Other Lessons for You

HTMl tutorial for input type
<html> <body> <form> <input type="tel" id="phone" name="phone" pattern="{10}"required><br> <input type="submit" value="Submit"> </form> </body> </html>

Taru Sharma | 19/06/2020

0 0
0

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the...

Gagan | 02/02/2018

0 0
0

Angular-2 Developer Training Program Syllabus
Angular2 Developer Training Program Syllabus: Introduction to Angular2. Why Angular2. Angular2 Features: Components, Services and Typescript. Angular2 Components: Templates, Modules, Services...

DeCode Classes | 11/12/2017

0 0
0

Pro Developer Program Syllabus
What you will learn in Pro-Developer Program: i. Introduction to Web Technologies. ii. Introduction to .Net - Features of .Net, CTS, CLS, CLR and MSIL. iii. C# & .Net Basics - Data Types,...

DeCode Classes | 23/11/2017

1 0
0

HTML - Introduction
HTML - Hypertext Markup Language is the standard markup language for creating web applications. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information...

Dibu John | 22/09/2017

1 0
0

Looking for CSS Training?

Find best CSS Training in your locality on UrbanPro.

Are you a Tutor or Training Institute?

Join UrbanPro Today to find students near you
Sponsored
X

Looking for CSS Classes?

Find best tutors for CSS Classes by posting a requirement.

  • Post a learning requirement
  • Get customized responses
  • Compare and select the best

Looking for CSS Classes?

Find best CSS Classes in your locality on UrbanPro

Post your learning requirement

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more