Button that expands in Hover with CSS Transition

Question

I’m trying to make a button, that in the hover it expands and shows the rest of the button.

Here is an example of what I want to do (the button is a simple <h2>):

h2:before {
  content: 'Testando';
  font-family: Arial;
  background-color: #ccc;
  font-weight: normal;
  -webkit-transition:width 0.2s;
  transition: width 0.2s;
  padding:10px;
  width:100px;
  float:left; 
}
h2:hover:before {
  width:200px;
  content: 'Testando o botão';
}

http://jsfiddle.net/FKXWF/1/

But as you can see, no hover the last of the button appears half crooked...

Answer 1

One of the possible solutions is to force the text inside the button to occupy only one line. You can do this by adding white-space: nowrap; overflow: hidden on your button:

h2:before {
  content: 'Testando';
  font-family: Arial;
  background-color: #ccc;
  font-weight: normal;
  -webkit-transition:width 0.2s;
  transition: width 0.2s;
  padding:10px;
  width:100px;
  float:left;
  white-space: nowrap;
  overflow: hidden;
}
h2:hover:before {
  width:200px;
  content: 'Testando o botão';
}

http://jsfiddle.net/FKXWF/2/