We are going to start with a simple HTML page.
<html>
<head>
<title>HUBKART</title>
</head>
<body>
<button>Click Me !</button>
</body>
</html>
Now we put some CSS in head section for button.
button {
border: none;
background: #000;
color: #fff;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 1s ease;
}
Here Transition property is very important,The only really important property is to animate when changed.
To achieve this we need to make use of the before pseudo element:
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}
Now a semi-transparent background shading makes the button give off an impression of being inundated on hover. It ordinarily originates from one side and moves until the whole button is covered.
<html>
<head>
<title>HUBKART</title>
</head>
<body>
<button>Click Me !</button>
</body>
</html>
Now we put some CSS in head section for button.
button {
border: none;
background: #000;
color: #fff;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 1s ease;
}
Here Transition property is very important,The only really important property is to animate when changed.
To achieve this we need to make use of the before pseudo element:
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}
Now a semi-transparent background shading makes the button give off an impression of being inundated on hover. It ordinarily originates from one side and moves until the whole button is covered.
Post a Comment