ANIMATED HOVER EFFECT BUTTON USING HTML & CSS

ANIMATED HOVER EFFECT BUTTON USING HTML & CSS

In CSS, you can create keyframes and use them for animations on different elements of your Web pages, including buttons. Keyframes consist of a single, reusable animation with properties set at various points. When the same property changes a little at each point, it creates a smooth  animation. Using this, you can set the position of a button at each keyframe point to create a bouncing effect. This trick does not require any JavaScript or other coding, provided that the visitor of the site is using a browser that supports keyframes.

What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

What is CSS effect?
CSS effects will add a special touch to any website. This type of coding language can be used to create cool visual effects and layouts for your website, and best of all, it's relatively simple and straightforward. Even if you're not familiar with coding, it won't be very difficult to get the hang of it.

btn-wrapper Class:

is used to align button center horizontally and vertically, it is an outer box for both buttons.

btn Class:
btn is a common class for both buttons, it is used to give button height, width, border, background-color, font-color, margin and font size.

btn1, btn2 Class:
btn1 and btn2 class are used to give each button a different animation and provide them a different properties.

CSS for HTML 

It is a common css for background, btn-wrapper and gradient background for both buttons.

we added animation when mouse hover on button1. Only shadow is added to button1. when mouse will hover on button1 the shadow will be displayed. The animation duration is 0.2s as shown in above image:

animation is a keyword, hoverEffect is the name of animation.

Here two animations are added bringToTop & bringToBottom. When mouse is hover on the button2 the first animation (bringToTop) moves button from its default position to top . When the mouse hover is out from the button2 it moves button from top to its default position.

@keyframes

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

bringToTop is the name of animation.

from defines the default state of animation.

to defines the movement on specific item.

movement time is already defined in 
animation: bringToTop 0.2s linear forwards query.

transform:translateY() is used to move item in Y direction (up & down ) here in our condition the default state 0px and we moved button to upside 15px.

Code Available on Github :

Code Designer World