Olá, pessoal. Gostaria de fazer uma transição ao clicar no botão pequeno para um botão com frase e com maior width. Mas ocorre o problema da frase não acompanhar a largura do botão. Queria que a frase ficasse na mesma linha, mas ao clicar ela primeiramente fica com quebra pra depois se alinhar ao botão. Agradeço se puder me ajudar!
o botão está assim:
const quality = ['TEXTURA FLUÍDA E AÇÃO ANTIOXIDANTE']
const buttons = document.querySelectorAll('.btn')
buttons.forEach((button, indice)=>{
button.addEventListener('click', ()=> {
if(button.innerText === '+'){
button.innerText = quality[indice]
button.style.cssText =
'width: 280px;'
}else{
button.innerText = '+'
button.style.cssText =
'width: 25px;'
}
})
})
.btn {
width: 25px;
height: 25px;
margin: 10px 40px 50px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px;
border-radius: 50px;
font-weight: bold;
font-size: 12px;
cursor: pointer;
background: #ffff;
color: #000000;
border: 1px solid #000000;
transition: 0.5s;
}
<button class="btn">+</button>