how does float left affect transform translate - html

Question

If I remove the float:left attribute from .action-button the transform animation doesn't work. Can you explain what is happening here?
Markup:
Are
Styles:
.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.green
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
Codepen line 17: http://codepen.io/koriolis/pen/euAEg

Answer 1

This is because a elements are inline elements, in that they align the the parent element and do not clear either side.
When you add float: left, It changes the elements from being inline to block but also removes the clear: both and allows for elements to be aligned next to each other.
You can achieve the same effect as a float by using inline-block if you don't want the tags to float on the page.
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
CodePen Example

Answer 2

tag a - default display: inline
float: left - display property is set to block
when you remove float: left - a again display: inline
use display: inline-block instead float: left
body {
padding: 50px;
}
.animate {
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family:'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.blue {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.red {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.yellow {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.action-button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
border-bottom: 1px solid;
}
Hello
How
Are
You?
fiddle