アニメーションの前と後にサブミット要素を入力する

Question

アニメーションがの入力フィールドにあり、その上にとどまり、サブミットはアクティブではなくなりました。 z-indexは役に立ちません。

動作させることはできますか？

は、連絡先がフォームのクラスであることに注意してください。

HTML

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

マイCSSコード

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

.aspire-contact-wrapper:before

ためz-index: -10;を使用して試してみても、より良いあなたは絶対的な要素を配置しているよう.aspire-contact-wrapperは、position:relativeこと作りますその中で ：）