Entrar Ainda não tem acesso?
1
resposta

Como deixar o conteúdo de um botão responsivo em CSS3?

por RAVEL VIEIRA AGUILAR MEDEIROS
| 31.9k xp | 1 posts
Analista de Qualidade de Software

Olá, estou tendo um problema em meus estudos há alguns dias. Tenho um botão ao qual gostaria de torná-lo responsivo. De fato, eu consigo deixar a estrutura do botão responsiva, porém, o conteúdo (CALCULAR) que está dentro dele não fica responsivo.

https://i.stack.imgur.com/wxQGS.png

Como posso solucionar?

HTML Código:

    <main>
  <section class="conteudo">
    <input class= "conteudo__caixas" type="text" id="dados-nome" placeholder="Seu Nome" />
    <input class= "conteudo__caixas" type="text" id="dados-altura" placeholder="Sua Altura" />
    <input class= "conteudo__caixas" type="text" id="dados-peso" placeholder="Seu Peso" />
    <button class="conteudo__botao">CALCULAR</button>
    <p id="texto-resultado"></p>
  </section>
</main>`

CSS Código:

    .conteudo__botao {
    width: 7.5%;
    padding: 0.5%;
    border: 1px solid #8B5CF6;
    border-radius: 8px;
    color: white;
    background-color: transparent;
}
1 resposta
por Diogo Mainart Monteiro
| 71.7k xp | 32 posts

Opa colega,

cara, o CSS impede isso porque não é uma boa prática. Quanto tratamos de tamanho de fonte temos que usar o media query neste caso, porque tamanho de fonte é uma coisa muito complicada, se fica muito pequeno ou grande demais fica ruim da pessoa ler. Exemplo de código:

@media screen and (max-width: 200px){
    .texto{
        font-size: 0.8rem
    }
}

@media screen and (max-width: 600px){
    .texto{
        font-size: 1.1rem
    }
}

Outra coisa que você pode por alterar se quiser que o botão fique com as medidas que definiu no seu código é trocar o width fixo por um min-width, ou seja, o css vai tentar definir a largura do bloco a partir do que está ali, porém, se necessario ele pode aumentar o tamanho para se ajustar ao tamanho do texto.

Você pode fazer algo similar ao que eu fiz acima. Porém, destaco que você adapte o tamanho do seu container em relação ao tamanho da fonte, porque como eu disse, por princípios de UX o melhor seria fazer esses medias querys e definir tamanhos pontuais para seus textos.

Espero ter ajudado! Qualquer dúvida estamos a disposição, bons estudos!