<button> is not working on chrome

Using Django Templates & Frontend
1

Hello,
I have a little problem with my code. Indeed, I have been trying to fix it for a while but I did not find any solutions.

This is my html code :

{% csrf_token %} En savoir plus this is my css code : /* Style du bouton "En savoir plus" */ .btn-header { width: 150px; /* Largeur augmentée */ height: 45px; /* Hauteur augmentée */ font-size: 1.2em; /* Taille de la police de caractères légèrement augmentée */ cursor: pointer; background-color: #ffffff; color: #ff8040; border: none; border-radius: 10px; transition: all .4s; margin-top: 20px; /* Marge supérieure pour espacement */ margin-left: 70px; /* Marge à gauche pour alignement avec les titres */ font-family: 'Roboto', sans-serif; font-weight: bold;

}

.btn-header:hover {
border-radius: 5px;
transform: translateY(-10px);
box-shadow: 0 7px 0 -2px #ff8a50,
0 15px 0 -4px #ffa274,
0 16px 10px -3px #ffd1bb;
}
.button-container {
margin-top: 20px; /* Ajoute de la marge en haut du conteneur */

}

.btn-header:active {
transition: all 0.2s;
transform: translateY(-5px);
box-shadow: 0 2px 0 -2px #ff8a50,
0 8px 0 -4px #ffa274,
0 12px 10px -3px #ffd1bb;
}

.text-container {
margin-bottom: 20px; /* Ajoute de l’espace en bas du texte */
}
My button is only working when I reduce the size of my page and I don’t this problem on Microsoft Edge

1 Like
2

Please use bootstrap or anyother framework.

3

This actually is not a Django issue. You may get faster and more direct assistance in either a “CSS” or even a Chrome-related forum.

Generally speaking, if changing the size of the browser window affects this, then you’re probably going to need to look at the structure of the page as a whole. These symptoms may not be related solely to the button definition.

Using your browser’s developer tools to visualize what css is being applied to this button will likely help identify a cause.