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>
<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>
.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>
