Ads (728x90)

Techonlogy

Subscribe Here

Sponsor

Social Share

Recent

Business

Video

Gallery

videos

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.






Post a Comment