Ads (728x90)

Techonlogy

Subscribe Here

Sponsor

Social Share

Recent

Business

Video

Gallery

videos

CSS button hover effect : Animate icon
First thing we have to do, Create a simple HTML page.

<html>
<head>
<title>HUBKART</title>
</head>
<body>
<button>Add Product</button>
</body>
</html>


Now put some CSS on button:


button {
    border: none;
    background: #000;
    color: #fff;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    padding: 10px 35px; 
    overflow:hidden;
    box-sizing: border-box;
    transition: all 1s ease;
}

Now we will put some effect on it. This effect is used in E-commerce websites, like add a product , or submitting a form.  we have to do nothing more just slide the icon appear beside text when user hovers over the button.

The next step is adding the product icon.  Here we use the font- awesome for the icon you can use here image also :

button:before {
    font-family: FontAwesome;
    content:"\f07a";
    position: absolute;
    top: 11px;
    left: -30px;
    transition: all 200ms ease;
}

Now, all is set last thing we need to do is float the icon by setting its left property:

button:hover:before {
    left: 7px;
}

Post a Comment