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:
Depois:
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:
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.