TecnoBeast-Make Your Way Digital..!!!

Saturday 25 February 2017

Animate Button on Hover Simple and Easy Code using Html and Css.

In this post i will show you simple code for styling button.Which on hover will animate with the button text.

STEP 1:

So lets see the basic html code in which we will be creating two <a>tag.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blue-btn" >
<a class="first-link" href="#">
BUTTON
</a>
<a href="#">
BUTTON
</a>
</div>
</body>
</html>

Here we created to two <a>tag in which when someone hover on it the Button text will animate.
This is only possible with the CSS Styling.
So lets See the Step 2 for CSS style.

STEP 2:
Link CSS style to html document
<link rel="stylesheet" type="text/css" href="style.css">

CSS StyleSheet(style.css)

<style>
.blue-btn a{
color: white;
text-decoration:none;
text-align: center;
display:block; /* important */
}

.blue-btn, .first-link{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;

}

.blue-btn{
position: relative;
height: 64px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow:hidden;
width: 200px;
background-color: #3b5998;
left: 150px;
}

.blue-btn:hover{
background-color: #003D99;
}

.blue-btn a:hover{
color: #199900;
text-decoration: none;
}

.first-link{
margin-top: 0em;
}

.blue-btn:hover .first-link{
margin-top: -4em;
}
</style>

This is the simple code for Styling Button and making it animated. Thank You.
DOWNLOAD

SEE DEMO:

BUTTON BUTTON