1

Olá. Conforme foto abaixo, o botão não se ajusta ao tamanho do texto apenas no IOS. Existe algum parâmetro para aumentar o tamanho do botão no IOS? (Não gostaria de ter que trocar os botões por DIVs).

Tentei aumentar o tamanho do botão utilizando a classe abaixo. O botão fica maior no Android e no Windows. Mas no IOS o botão continua pequeno e cortando a maior parte do texto.

Em html:

 <button class="button">

Em css:

.button {
    padding: 15px 32px;
}   

inserir a descrição da imagem aqui

0

1 Resposta 1

1

Adicione a propriedade -webkit-appearance: none; no seu button para remover o estilo padrão de botões do iOS:

.button{
   -webkit-appearance: none;
   padding: 15px 32px;
}

Antes:

inserir a descrição da imagem aqui

Depois:

inserir a descrição da imagem aqui

Agora, para que o botão não fique com um fundo branco aparentando não ser um botão, você pode estiliza-lo adicionando uma cor de fundo gradiente, por exemplo:

.button{
   -webkit-appearance: none;
   padding: 15px 32px;

   background: rgb(238,238,238); /* Old browsers */
   background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

Ficará assim:

inserir a descrição da imagem aqui

Você pode também utilizar @media rules para que o botão só perca o estilo padrão a partir de certa resolução, mantendo o estilo original em navegadores desktop. Por exemplo, até uma resolução de 768px, ao botão é aplicado o estilo:

@media screen and (max-width: 768px){
   .button{
      -webkit-appearance: none;
      padding: 15px 32px;

      background: rgb(238,238,238); /* Old browsers */
      background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
   }
}

Uma sugestão é sempre estilizar seus botões (colocar cor de fundo, bordas, sombras etc.) e não deixar por conta do navegador ou SO, porque cada um estiliza de forma diferente. Desta forma você tem mais controle sobre aparência dos botões combinando com o tema do seu site.

1
  • Legal! Considere marcar ✔ na resposta. Como vc é novo por aqui, dá uma lida na página Tour. Abs!
    – Sam
    26/11/2018 às 16:16

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 .