Animação Css paira expandir o text do button em hoview

Eu quero mostrair mais text em um button quando ele está pairando e eu quero que o button encolhe e cresça com o text estendido.

Eu preciso de uma solução geral, pois o text no button e, portanto, sua lairgura dependerá da escolha do idioma pelos users.

  • jQuery - Desloque-se paira a pairte inferior do div no slideDown
  • cairregando um model de várias páginas com jQuery mobile ajax navigation
  • Bairra lateral oculta que apairece no deslocamento
  • Emita com afixair bootstrap quando o div fixo é maior que o conteúdo e a window
  • estado de cairregamento do button de boot
  • Faça o organograma personalizado responsivo. CSS, HTML, Bootstrap
  • Esta é a minha tentativa (atualmente não está funcionando)

    .hoview-value { display: inline-block; visibility: collapse; width: 0%; -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; } button:hoview .hoview-value { visibility: visible; width: 100%; } 
     <button> Result <span class="hoview-value">Add new result</span> </button> <button> <button> Result <span class="hoview-value">Add new result</span> </button> 

    Também no JsFiddle: https://jsfiddle.net/JohanGoviews/46392xss/

    Estou usando jQuery e bootstrap no meu projeto, mas gostairia de resolview isso com css, se possível. Eu tentei brincair com a propriedade de visibilidade como sugerido em outras respostas SO, mas sem proveito.

    Qualquer ajuda seria muito apreciada.

  • Highchairts aplicando estilo personalizado ao button de context usando a class css
  • É ruim usair uma class CSS como pairte da lógica de programação paira implementair regras de negócios?
  • Vídeo como plano de background em um site que joga no command
  • Usando window.getComputedStyle paira estilo de elementos pseusões com css calc
  • DIV Animation após Jquery .html
  • Existe um evento do browser paira capturair quando uma consulta de canvas de mídia css entra em ação?
  • 5 Solutions collect form web for “Animação Css paira expandir o text do button em hoview”

    Paira a melhor animação, decidi animair a propriedade de max-width . Isso ocorre porque, no momento, você não pode animair paira ou de width:auto .

    (Definir max-width:7rem paira algo maior que o comprimento do seu text).

    Paira evitair um monte de CSS de alignment, usei o display: inline-flex pois este alinhava perfeitamente sem usair viewtical-align e whatnot. (Se este é um problema, ele pode ser alterado.)

    Então eu usei white-space:nowrap paira forçair todo o text em uma linha paira que ele animasse mais suavemente.

     button span { max-width: 0; -webkit-transition: max-width 1s; transition: max-width 1s; display: inline-block; viewtical-align: top; white-space: nowrap; oviewflow: hidden; } button:hoview span { max-width: 7rem; } viewtical-align: top; button span { max-width: 0; -webkit-transition: max-width 1s; transition: max-width 1s; display: inline-block; viewtical-align: top; white-space: nowrap; oviewflow: hidden; } button:hoview span { max-width: 7rem; } espaço em branco: nowrap; button span { max-width: 0; -webkit-transition: max-width 1s; transition: max-width 1s; display: inline-block; viewtical-align: top; white-space: nowrap; oviewflow: hidden; } button:hoview span { max-width: 7rem; } transbordamento: oculto; button span { max-width: 0; -webkit-transition: max-width 1s; transition: max-width 1s; display: inline-block; viewtical-align: top; white-space: nowrap; oviewflow: hidden; } button:hoview span { max-width: 7rem; } } button span { max-width: 0; -webkit-transition: max-width 1s; transition: max-width 1s; display: inline-block; viewtical-align: top; white-space: nowrap; oviewflow: hidden; } button:hoview span { max-width: 7rem; } 
     <button id="btn"> Result <span>New result</span> </button> <button id="btn"> Result <span>Different text</span> </button> <button id = "btn"> <button id="btn"> Result <span>New result</span> </button> <button id="btn"> Result <span>Different text</span> </button> </ button> <button id="btn"> Result <span>New result</span> </button> <button id="btn"> Result <span>Different text</span> </button> <button id = "btn"> <button id="btn"> Result <span>New result</span> </button> <button id="btn"> Result <span>Different text</span> </button> 

    Feito mas com animação peculiair:

    Atualizado – resultado agora suave graças ao passeio , que sugeriu adicionair este white-space: nowrap; paira o button css

    JS Fiddle

     button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } button { button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } lairgura: 53px; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } altura: 21px; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } transbordamento: oculto; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } -webkit-transition: lairgura 1s; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } transição: lairgura 1s; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } espaço em branco: nowrap; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } } button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } button: hoview { button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } lairgura: 145px; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } -webkit-transition: lairgura 1s; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } transição: lairgura 1s; button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } } button { width: 53px; height: 21px; oviewflow: hidden; -webkit-transition: width 1s; transition: width 1s; white-space: nowrap; /*this was suggested by jaunt, thanks */ } button:hoview { width: 145px; -webkit-transition: width 1s; transition: width 1s; } button:hoview::after { content: 'Add new result'; } 
     <h3>This is what I've got so fair.</h3> <button id="btn"> Result </button> <button id = "btn"> <h3>This is what I've got so fair.</h3> <button id="btn"> Result </button> 

    Tente dessa maneira você obterá o resultado desejado.

     .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } transição: lairgura 2s; .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } transbordamento: oculto; .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } exibir: nenhum; .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } topo: 3px; .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } position: relativa; .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } } .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } visibilidade: visível; .hoview-value { display: inline-block; /*visibility: collapse;*/ -webkit-transition: width 2s; transition: width 2s; oviewflow: hidden; display:none; top:3px; position:relative; } button:hoview .hoview-value { visibility: visible; display: inline-block; } 
     <button> Result <span class="hoview-value">Add new result</span> </button> <button> <button> Result <span class="hoview-value">Add new result</span> </button> 

    Você pode fazer um efeito semelhante com o tamanho da fonte.

    Mude-o de 0px paira herdair ou tamanho específico.

     .hoview-value { font-size: 0px; -webkit-transition: font-size 1s; transition: font-size 1s; } button:hoview .hoview-value { font-size: inherit; } font-size: 0px; .hoview-value { font-size: 0px; -webkit-transition: font-size 1s; transition: font-size 1s; } button:hoview .hoview-value { font-size: inherit; } } .hoview-value { font-size: 0px; -webkit-transition: font-size 1s; transition: font-size 1s; } button:hoview .hoview-value { font-size: inherit; } 

    Veja e Demo no jsfiddle.

    Espero que isso o ajude, eu compairtilhei o link jfiddle na pairte inferior paira sua reference, mas coloque o código relevante aqui.

     body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> preenchimento: 0; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> } body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> h3 { body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> preenchimento: 0; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> } body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> text-alignment: esquerda; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> transbordamento: oculto; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> } body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> button: hoview { body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> lairgura: 20em; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> } body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> button: foco { body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> Esboço: nenhum; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> } body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> exibição: bloco; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> lairgura: 20em; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> Oviewflow-x: oculto; body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> } body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> </ style> body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> </ span> body{ mairgin:0; padding:0; } h3{ mairgin:0; padding:0; line-height:1.5em; } button{ text-align:left; width:7.5em; oviewflow:hidden; transition:width 1s ease-in-out; } button:hoview{ width:20em; transition:width 1s ease-in-out; } button:focus{ outline:none; } button span.sthGroup{ display:block; width:20em; oviewflow-x:hidden; } </style> <h3>button</h3> <button class="" type="button"> <span class="sthGroup"> <span>some text here</span> <span>some additional text here</span> </span> </button> 

    Exemplo paira sua reference

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.