Avant et après l'animation pour saisir l'élément de soumission

Question

J'ai une animation vers un champ qui reste en haut et envoyer n'est plus actif. z-index ne sert à rien.

Il est possible de le faire fonctionner?

Veuillez noter que aspire-contact est la classe du formulaire.

HTML

<div class="aspire-contact-wrapper"> 
    <input value="SUBMIT" id="submit-button" class="aspire-contact-submit" type="submit"> 
</div> 

Mon CSS Code

input.aspire-contact-submit{  
color: #fff; 
background-color: transparent; 
border: none; 
transition: all 0.4s ease-in-out; 
-webkit-transition: all 0.4s ease-in-out; 
z-index: 9999;} 

.aspire-contact{ 
position: relative;} 

.aspire-contact-wrapper{ 
border: 2px solid #fff!important; 
display: inline-block; 
padding: 33px 11px; 
border-radius: 50%; 
margin-top: 40px; 
z-index: 10;} 

.aspire-contact-wrapper:before { 
content: ''; 
width: 96px; 
height: 96px; 
position: absolute; 
border: 1px solid #fff; 
border-radius: 100%; 
left: 50%; 
margin-left: -48px; 
bottom: 5%; 
margin-bottom: -22px; 
display: inline-block; 
-webkit-animation: doublePulsation 1.9s ease infinite; 
animation: doublePulsation 1.9s ease infinite; 
z-index: 10;} 

@-webkit-keyframes doublePulsation { 
0% {-webkit-transform: scale(1.0, 1.0); opacity: 0.0;} 
50% {opacity: 0.55;} 
100% {-webkit-transform: scale(1.3, 1.3); opacity: 0.0;} } 

@keyframes doublePulsation { 
0% {-webkit-transform: scale(1.0, 1.0); opacity: 0.0;} 
50% {opacity: 0.55;} 
100% {-webkit-transform: scale(1.3, 1.3); opacity: 0.0;} } 

Answer 1

Essayez d'utiliser z-index: -10; pour .aspire-contact-wrapper:before

Et aussi mieux faire .aspire-contact-wrapper être position:relative, comme vous le positionnement de l'élément absolu à l'intérieur :)