Bonjour à tous,

J'ai un input type bouton qui s'affiche très bien sur tous les navigateurs (aussi bien en mode "normal" qu'en responsive)

Sauf sur Firefox en mode responsive :

Le border-radius est bien appliqué mais il est pixélisé (sur Chrome ou alors Microsoft Edge il n'a pas les bords pixélisés)

Voici mon code html :

<a href=""><input type="button" value="Nous contacter" class="btn-contact"></a>

Et le CSS correspondant :

.btn-contact{
    border: 3px solid #3e3272;

    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;

    border-top-right-radius: 50px;
    -moz-border-radius-top-right: 50px;
    -webkit-border-top-right-radius: 50px;

    border-bottom-right-radius: 50px;
    -moz-border-radius-bottom-right: 50px;
    -webkit-border-bottom-right-radius: 50px;

    border-bottom-left-radius: 50px;
    -moz-border-radius-bottom-left: 50px;
    -webkit-border-bottom-left-radius: 50px;

    border-top-left-radius: 50px;
    -moz-border-radius-top-left: 50px;
    -webkit-border-top-left-radius: 50px;

    color: #3e3272;
    font-size: 25px;
    font-weight: bold;
    padding: 10px 60px;
    background: #F2F6F5;    
    margin-right: 25px;
    cursor: pointer;
}

.btn-contact:hover{
    color: #FFFFFF;
    background: #3e3272;
}

J'ai essayé tout ce qui est du style -moz-border-radius, un border-radius pour chaque angle (border-top-right-radius, border-top-left-radius, etc) mais rien qui puisse résoudre mon problème.

Si vous avez des solutions, je suis preneur. Merci d'avance.

-
Edité par Ashgarn 28 septembre 2021 à 14:14:55

Bonjour,

Qu'es ce que tu entend par : Firefox en mode responsive? Comment simules tu ton mode responsive?

Je ne vois aucun problème avec ton bouton sur Firefox. Par contre, ton bouton n'est en rien responsive à cause de l'input!

De plus, ton input n'as rien à faire ici! Es ce que ton "bouton" envoi un formulaire? Ou es ce un simple lien?

Si c'est pour envoyer un formulaire, utilise la balise <button> sans le <a>. Et si c'est un simple lien, utilise seulement la balise <a>. Inutile dans ton cas de mettre un input type button dans une ancre!

-
Edité par Lord Morpheus 28 septembre 2021 à 14:16:54

Et tu peux enlever tout ça :

 border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
 
    border-top-right-radius: 50px;
    -moz-border-radius-top-right: 50px;
    -webkit-border-top-right-radius: 50px;
 
    border-bottom-right-radius: 50px;
    -moz-border-radius-bottom-right: 50px;
    -webkit-border-bottom-right-radius: 50px;
 
    border-bottom-left-radius: 50px;
    -moz-border-radius-bottom-left: 50px;
    -webkit-border-bottom-left-radius: 50px;
 
    border-top-left-radius: 50px;
    -moz-border-radius-top-left: 50px;
    -webkit-border-top-left-radius: 50px;
 

Pour ne garder que ça :

border-radius: 50px;

Tout le reste n'a aucun intérêt.

Quand je dis Firefox en mode responsive, je parle de ça :

-
Edité par Ashgarn 28 septembre 2021 à 14:55:26

Bonjour, est-ce que votre code et valide? Pour le savoir passez le au validateur => https://validator.w3.org/

Est-ce que la balise meta viewport est bien présente?

EmmanuelBeziat a écrit:

Et tu peux enlever tout ça :

 border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
 
    border-top-right-radius: 50px;
    -moz-border-radius-top-right: 50px;
    -webkit-border-top-right-radius: 50px;
 
    border-bottom-right-radius: 50px;
    -moz-border-radius-bottom-right: 50px;
    -webkit-border-bottom-right-radius: 50px;
 
    border-bottom-left-radius: 50px;
    -moz-border-radius-bottom-left: 50px;
    -webkit-border-bottom-left-radius: 50px;
 
    border-top-left-radius: 50px;
    -moz-border-radius-top-left: 50px;
    -webkit-border-top-left-radius: 50px;
 

Pour ne garder que ça :

border-radius: 50px;

Tout le reste n'a aucun intérêt.

Concernant le fait de ne laisser que border-radius, c'est bien ce que j'avais au départ, et en recherchant sur Internet ça parlait de -moz-border-radius, etc mais je n'ai vu aucun post, aucune doc sur cet effet pixélisé que j'ai

-
Edité par Ashgarn 28 septembre 2021 à 16:00:07

AbcAbc6 a écrit:

Bonjour, est-ce que votre code et valide? Pour le savoir passez le au validateur => https://validator.w3.org/

Est-ce que la balise meta viewport est bien présente?

Je me permet de te citer AbcAbc6 afin que l'auteur vois ton message.

Lord Morpheus a écrit:

AbcAbc6 a écrit:

Bonjour, est-ce que votre code et valide? Pour le savoir passez le au validateur => https://validator.w3.org/

Est-ce que la balise meta viewport est bien présente?

Je me permet de te citer AbcAbc6 afin que l'auteur vois ton message.

Bonjour, alors ducoup oui mon code est valide, par contre je n'ai pas mis la balise meta viewport, je vais la rajouter et vous tiens au courant.

Update : ça a bien résolu mon problème, la balise meta viewport applique un effet de zoom plus important par rapport à la seule présence des media queries lorsque je suis en mode responsive, et ça masque les pixels créés par le border-radius du bouton pour un affichage net. En tout cas merci !

-
Edité par Ashgarn 30 septembre 2021 à 12:44:27