<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