Button that expands on hover with CSS Transition

Question

Button that expands on hover with CSS Transition

Navigation

#1 by (4 votes)

1

I'm trying to make a button, which does not% expand, and show the rest of the button.

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

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';
}

link

But as you can see, in the <h2> the button rests appear half crooked ...

html css css3

asked by anonymous 15.05.2014 / 04:27

1 answer

How to force the "change" event of an input select, even without choosing another value? How to use Window.ClientBouds inside a class in XNA

score 4 · Accepted Answer

One possible solution is to force the text inside the button to occupy only one line. You can do this by adding white-space: nowrap; overflow: hidden to 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';
}

link