Кнопка отправки гравитационных форм CSS-эффекты не применяются - PullRequest
0 голосов
/ 31 мая 2019

История: Недавно я задал вопрос, касающийся получения «растущего» эффекта на кнопке (работает как брелок), затем меня попросили применить тот же эффект к моей кнопке отправки гравитационных форм, нокажется, ничего из того, что я делаю, не работает;Я даже впал в отчаяние из-за того, что все "! Важно".

Вопрос: Не могли бы вы помочь мне понять, почему тот же CSS, который я применил к кнопкам вне форм гравитации, кажется,работать, хотя это не так, когда я применяю его к кнопке внутри гравитационных форм?

Как это должно выглядеть: Найдите ссылку ниже, чтобы увидеть, как мне нужно, чтобы кнопка выглядела (только«растущий» эффект) после применения приведенного ниже CSS.

Округление фонового изображения кнопки

body .gform_wrapper .gform_footer input[type=submit] {
  color: #000;
  background: #fdc900;
}

body .gform_wrapper .gform_footer input[type=submit] {
z-index:99 !important;
text-decoration:none !important;
transition:color 1s !important;
  position: relative !important;
  display: inline-block !important;
  padding: 15px 70px !important;
  border: 1px solid #fdc900 !important;
  border-radius:50px !important;
  position:relative !important;
}

body .gform_wrapper .gform_footer input[type=submit]:hover:after{
  width:100% !important;
}

body .gform_wrapper .gform_footer input[type=submit]:hover{
  color:red !important;
}

body .gform_wrapper .gform_footer input[type=submit]:after{
  width:0% !important;
  transition: width 1s !important;
  height:100% !important;
  z-index:-1 !important;
  content:"" !important;
  position:absolute !important;
   border-radius:50px !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  background-image: linear-gradient(#fdc100, #fdc100) !important;
}
<input type="submit" id="gform_submit_button_2" class="gform_button buttonCustom-Button" value="GET QUALIFIED NOW" tabindex="59" onclick="if(window[&quot;gf_submitting_2&quot;]){return false;}  window[&quot;gf_submitting_2&quot;]=true;  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_2&quot;]){return false;} window[&quot;gf_submitting_2&quot;]=true;  jQuery(&quot;#gform_2&quot;).trigger(&quot;submit&quot;,[true]); }">
...