Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content


How to create a Button and Hover Effect in CSS3?

In last video, we added second section side by side. Reduce the margin-right size between them from section command in CSS. To add a button, we will use anchor tag. Because, anchor tag is used when you want to redirect into another page. Let’s see how to define it in Html -

<div class= “but”><a href=”#>click me</a></div>

Copy this command and use it in another section, too. Go to browser and do refresh on web page. You will see, click me is appeared at bottom of both the section. Now, to show it as button, go to css. Define button as follow -

.but a {color:green; text-decoration: none; }

You’ll see, it is colored as green and underline is also disappeared. Now, to apply background to it -

.but a {color:green; text-decoration: none; background: yellow; }

On web page, you can see, background has applied. To show it more properly, we will add padding -

.but a {color:green; text-decoration: none; background: yellow; padding: 10px;}

On refreshing, you will notice change. Same way, instead of padding add margin and check the result. To add space in division, we will use padding, and for outside, we will use margin. So, here we will use padding. You can also add border; to apply border -

.but a {color:green; text-decoration: none; background: yellow; padding: 10px; border: 1px solid green;}

To show hover effect on button -

.but a:hover{ background: green; color: red; border: 1px solid red;}

On webpage, check that button is showing green background when hover and red fonts and border at the same time. Same way, you can use active, focus.

So this way, you can create a button in HTML using css and apply hover effect to it.


Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere