<button> is not working

[Alpha Diallo]

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 : <form action="{% url 'infos_view' %}" method="post">

{% csrf_token %}
<button type="submit" class="btn-header">En savoir plus</button>

</form>

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.