Create a Button Hover Effect using HTML & CSS

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to make Button Hover Effect  in  this blogger post.

 

In this program(Button Hover Effect) first, on the webpage

there are four simple buttons when you hover on the particular button the color of button change with amazing animation effect. Different animation effect is shows in different buttons.

Thats make your website more attractive and beautiful.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Button Hover Effect).

Video Tutorial of Button Hover Effect

I hope you like this program and video tutorial😊

If you like this program(Button Hover Effect) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Button Hover Effect[source code]

Before sharing the codes of this program( Button Hover Effect). Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file. In the HTML File first, i created a <div> with the class name container and then in container <div> i created four button with the class name - btn-1, btn-2, btn-3, btn-4 with the name of button (button1, button2, button3, button3) you can change the name of the button by your social media links or your interest.

In CSS file first (if you not using boostrap) reset the all default padding and margin to 0. Then i added basic CSS style on container <div> and body and fix the position by using flexbox.

I use Before and After element for hover effect of buttons. you can adjust your style by your own interest.

HTML FILE:

<h1>Button Hover Effect</h1> <div class="container"> <button class="btn-1">button1</button> <button class="btn-2">button2</button> <button class="btn-3">button3</button> <button class="btn-4">button4</button> </div>

CSS FILE:

body{ background-color:#fc0352; font-size: 65.5% } .container{padding: 20px; padding: 20px 0 20px 0;display: flex;flex-direction: row; margin-top: 150px;} h1{ font-size: 75px; justify-content: center; text-align: center; font-family: 'Baloo Paaji 2', cursive; color: white; letter-spacing: 2px; } button{ cursor: pointer; background:none; border: 3px solid white; border-radius: 5px; color: white; display: block; font-size: 16px; font-weight: bold; margin: 10px auto; padding: 28px 80px; position: relative; text-transform: uppercase; } button:before,button:after{ background-color: #fff; content: ''; position: absolute; z-index: -1; transition: 0.3s all ease-out; } button:hover{ color: #2ecc71; } .btn-1:after{ height: 0; left: 0; top: 0; width: 100%; } .btn-1:hover:after{height: 100%;} .btn-2{overflow: hidden;} .btn-2:after{ height: 100%; left: -15%; top: 0; transform: skew(50deg); transition-duration: .6s; transform-origin: top left; width: 0; } .btn-2:hover:after{width: 90%; height: 135%;} .btn-3:after{ height: 0; left: 50%; top: 50%; width: 0; } .btn-3:hover:after{ width: 100%; height: 100%; top: 0;left: 0; } .btn-4:after{ height: 100%; left: 0; top: 0; width: 0; } .btn-4:hover:after{width: 100%;}