1

sou meio novato trabalhando com métodos responsivos e estou tendo problemas com um detalhe, preciso trocar o texto de um btn por uma imagem quando minha aplicação for acessada por celular.

Alguém poderia me ajudar com isso?

<button class="btn btn-lg btn-info btn-block text-uppercase" id="prosseguir" type="submit">Prosseguir</button>

Eu gostaria que ao redimensionar a tela, o btn substituísse o "Prosseguir" por um icone.

Grato.

2
  • Aparentemente você está usando Bootstrap. Essa informação é correta? Se sim, qual versão? 13/11/2018 às 11:32
  • Estou usando a versão 4 13/11/2018 às 11:53

2 Respostas 2

3

Como complemento à resposta do Hugo, o Bootstrap já tem ferramentas para alterar a propriedade display variando de acordo com a largura do viewport (através das media queries). São as classes d-* (documentação).

OBS: quando me referir à xs, é o tamanho da tela (< 576px). Pois o BT4 usa a abordagem Mobile First, ou seja, se não especificado explicitamente os estilos são aplicados à telas xs (extra small)

Você pode dizer para imagem ficar escondida em todas as larguras, exceto xs usando as classes:

<span class="d-none d-sm-block">Prosseguir</span>

d-none faz com que o span seja display: none, e d-sm-block faz com que seja display: block para telas sm ou maiores, ou seja, ficará oculto apenas em telas xs.

Já na imagem você usaria:

<img class="d-inline-block d-sm-none" src="...">

d-inline-block faz com que a img seja display: inline-block, e d-sm-none faz com que seja display: none para telas sm ou maiores, ou seja, ficará visível apenas em telas xs.

Dessa maneira a visibilidade do span e do img ficam mutuamente excludentes.

Exemplo:

html, body {
  padding-top: 40px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<main class="container">
  <div class="row">
  
    <button class="btn btn-lg btn-info btn-block text-uppercase">
      <span class="d-none d-sm-block">Prosseguir</span>
      
      <img class="d-inline-block d-sm-none" src="https://getbootstrap.com.br/docs/4.1/assets/brand/bootstrap-solid.svg" style="max-width: 50px;">
      
    </button>
    
  </div>
</main>

Você pode deixar o snippet em tela cheia (link "página toda") e alterar a largura da janela do seu navegador para ver a responsividade funcionando

4
  • Bootstrap 4 não tem XS ;) getbootstrap.com.br/docs/4.1/layout/grid/#par%C3%A2metros-grid Outra dica, já que não vai ter texto no button, não se esqueça de colocar ALT na imagem
    – hugocsl
    13/11/2018 às 12:18
  • Eu reli a resposta e não vi onde disse classes XS. Eu disse tamanho de tela XS. E não tem a classe XS porque ela é a padrão (Extra small < 576px) devido à abordagem Mobile-First. Me ajuda aí Hugo, não entendi o porquê do comentário. hahahah 13/11/2018 às 12:21
  • É pq no Bootstrap 3 existe col-xs-* e XS é usado em várias outras coisas, já no Bootstrap 4 XS deixou de existir... as vezes isso pode confundir as pessoas. Foi apenas uma observação
    – hugocsl
    13/11/2018 às 12:26
  • Muito obrigado, deu certinho as dicas de vocês e obrigado pelos links de documentação, me elucidou bastante. 13/11/2018 às 12:52
3

Existem vária formas de fazer e uma delas é colocando um span dentro do button como eu fiz nesse exemplo. depois com a regra @media vc esconde e mostra esse span, ao mesmo tempo que vc retira o texto do bottun colocando o font-size:0 por exemplo.

Então caso a tela tenha no máximo 610px de largura a imagem aparece, caso seja mais quer 610px o texto do button aparece. Vc pode ajustar isso na regra @media caso queira

inserir a descrição da imagem aqui

A início vc pode pensar que não é uma forma totalmente semântica, porém o lado positivo é que mesmo com o font-size:0 o texto pode continuar visível para leitores de tela, porém não aparece para o usuário comum.

Veja o código correspondente a imagem acima:

.icon {
    height: 16px;
    width: 16px;
    background-image: url(https://placecage.com/16/16);
    vertical-align: middle;
    display: none;
}
@media screen and (max-width:610px) {
    .icon {
        display: inline-block;
    }
    button {
        font-size: 0;
    }
}
<button class="btn btn-lg btn-info btn-block text-uppercase" id="prosseguir" type="submit">
    Prosseguir
    <span class="icon"></span>
</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .