如何将此自定义按钮添加到我的 aweber 选择表单中？

问题描述 投票：0回答：1

如何更换表单中的提交按钮？ aweber 有一个黑色按钮，但我想将其更改为带有脉冲圆圈的绿色按钮。我已经尝试了一切，但我快要疯了。我尝试逐行删除行以使其正常工作并发出脉冲，但没有成功。我研究过搜索引擎和 youtube 寻求帮助，但一无所获。我真的希望有人能帮助我...请帮助！

我已将 HTML 和 CSS 附加到表单和所需的按钮。

html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  min-width: 300px;
  min-height: 60px;
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: #313133;
  background: #4FD1C5;
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
  }

button::before {
content: '';
  border-radius: 1000px;
  min-width: calc(300px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.button:hover, .button:focus {
  color: #313133;
  transform: translateY(-6px);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

button::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #00FFCB;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
<!-- AWeber Web Form Generator 3.0.1 -->
<style type="text/css">
#af-form-1021463792 .af-body{font-family:Helvetica, sans-serif;font-size:14px;color:#000000;background-image:none;background-position:inherit;background-repeat:no-repeat;padding-top:0px;padding-bottom:16px;}
#af-form-1021463792 {border-style:none;border-width:1px;border-color:#000000;background-color:#FFFFFF;}
#af-form-1021463792 .af-standards .af-element{padding-left:16px;padding-right:16px;}
#af-form-1021463792 .af-quirksMode{padding-left:16px;padding-right:16px;}
#af-form-1021463792 .af-header{font-family:Helvetica, sans-serif;font-size:24px;color:#000000;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-width:1px;background-image:none;background-position:inherit;background-repeat:repeat-x;background-color:#FFFFFF;padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:17px;}
#af-form-1021463792 .af-footer{font-family:Helvetica, sans-serif;font-size:12px;color:#000000;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;border-width:1px;background-image:none;background-position:top left;background-repeat:no-repeat;background-color:#FFFFFF;padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;}
#af-form-1021463792 .af-body input.text, #af-form-1021463792 .af-body textarea{border-color:#D9D9D9;border-width:1px;border-style:solid;font-family:Trebuchet MS, sans-serif;font-size:24px;font-weight:normal;font-style:normal;text-decoration:none;color:#C7C7C7;background-color:#FFFFFF;}
#af-form-1021463792 .af-body input.text:focus, #af-form-1021463792 .af-body textarea:focus{border-style:solid;border-width:1px;border-color:#030303;background-color:#FFFAD6;}
#af-form-1021463792 .af-body label.previewLabel{font-family:Helvetica, sans-serif;font-size:14px;font-weight:normal;font-style:normal;text-decoration:none;color:#000000;display:block;float:none;text-align:left;width:auto;}
#af-form-1021463792 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1021463792 .buttonContainer input.submit{font-family:Helvetica, sans-serif;font-size:18px;font-weight:normal;font-style:normal;text-decoration:none;color:#FFFFFF;background-color:#000000;background-image:none;}
#af-form-1021463792 .buttonContainer{text-align:center;}
#af-form-1021463792 .af-body label.choice{font-family:inherit;font-size:inherit;font-weight:normal;font-style:normal;text-decoration:none;color:#000000;}
#af-form-1021463792 .af-body a{font-weight:normal;font-style:normal;text-decoration:underline;color:#000000;}
#af-form-1021463792, #af-form-1021463792 .quirksMode{width:100%;max-width:575.0px;}
#af-form-1021463792.af-quirksMode{overflow-x:hidden;}
#af-form-1021463792 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1021463792{overflow:hidden;}
#af-form-1021463792 button,#af-form-1021463792 input,#af-form-1021463792 submit,#af-form-1021463792 textarea,#af-form-1021463792 select,#af-form-1021463792 label,#af-form-1021463792 optgroup,#af-form-1021463792 option {float:none;margin:0;position:static;}
#af-form-1021463792 select,#af-form-1021463792 label,#af-form-1021463792 optgroup,#af-form-1021463792 option {padding:0;}
#af-form-1021463792 input,#af-form-1021463792 button,#af-form-1021463792 textarea,#af-form-1021463792 select {font-size:100%;}
#af-form-1021463792 .buttonContainer input.submit {width:auto;}
#af-form-1021463792 form,#af-form-1021463792 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1021463792 img {float:none;color:inherit;margin:0;padding:0;position:static;background-color:none;border:none;}
#af-form-1021463792 div {margin:0;}
#af-form-1021463792 {display:block;}
#af-form-1021463792 body,#af-form-1021463792 dl,#af-form-1021463792 dt,#af-form-1021463792 dd,#af-form-1021463792 h1,#af-form-1021463792 h2,#af-form-1021463792 h3,#af-form-1021463792 h4,#af-form-1021463792 h5,#af-form-1021463792 h6,#af-form-1021463792 pre,#af-form-1021463792 code,#af-form-1021463792 fieldset,#af-form-1021463792 legend,#af-form-1021463792 blockquote,#af-form-1021463792 th,#af-form-1021463792 td { float:none;color:inherit;margin:0;padding:0;position:static;}
#af-form-1021463792 p { color:inherit;}
#af-form-1021463792 ul,#af-form-1021463792 ol {list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1021463792 .bodyText p {margin:1em 0;}
#af-form-1021463792 table {border-collapse:collapse;border-spacing:0;}
#af-form-1021463792 fieldset {border:0;}
.af-clear{clear:both;}
.af-form{box-sizing:border-box; margin:auto; text-align:left;}
.af-element{padding-bottom:5px; padding-top:5px;}
.af-form-wrapper{text-indent: 0;}
.af-body input.submit, .af-body input.image, .af-form .af-element input.button{float:none!important;}
.af-body input.submit{white-space: inherit;}
.af-body input.text{width:100%; padding:2px!important;}
.af-body .af-textWrap{text-align:left;}
.af-element label{float:left; text-align:left;}
.lbl-right .af-element label{text-align:right;}
.af-quirksMode .af-element{padding-left: 0!important; padding-right: 0!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-body input.image{border:none!important;}
.af-body input.text{float:none;}
.af-element label{display:block; float:left;}
.af-header,.af-footer { margin-bottom:0; margin-top:0; padding:10px; }
body {
}

#af-form-1021463792 {
  border-radius: 6px !important;
  box-shadow: rgba(0, 0, 0, .05) 0px 4px 30px 10px;
}

#af-form-1021463792 .bodyText p {
  margin: 0 0 1em !important;
}

#af-form-1021463792 .af-body {
  padding-top:
}

#af-form-1021463792 .af-body .af-textWrap {
  width: 100% !important;
}

#af-form-1021463792 .af-body .af-element {
  padding-top: 0px!important;
  padding-bottom: 0px!important;
}
#af-form-1021463792 .af-body .af-element:first-child {
  margin-top: 0 !important;
}
#af-form-1021463792 .af-body label.previewLabel {
  font-weight: 700 !important;
  margin-top: 0.25rem !important;
  margin-bottom: .25rem !important;
}
#af-form-1021463792 .af-body input.text,
#af-form-1021463792 .af-body textarea {
  border-radius: 3px !important;
  box-sizing: border-box !important;
  color: #444444 !important;
  font-size: 1rem !important;
  margin-bottom: 0.75rem !important;
  padding: 8px 12px !important;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

#af-form-1021463792 .af-body select {
  width: 100%;
}
#af-form-1021463792 .af-body .af-dateWrap select {
  width: 33%;
}
#af-form-1021463792 .choiceList-radio-stacked {
  margin-bottom: 1rem !important;
  width: 100% !important;
}
#af-form-1021463792 .af-element-radio {
  margin: 0 !important;
}
#af-form-1021463792 .af-element-radio input.radio {
  display: inline;
  height: 0;
  opacity: 0;
  overflow: hidden;
  width: 0;
}
#af-form-1021463792 .af-element-radio input.radio:checked ~ label {
  font-weight: 700 !important;
}
#af-form-1021463792 .af-element-radio input.radio:focus ~ label {
  box-shadow: inset 0 0 0 2px rgba(25,35,70,.25);
}
#af-form-1021463792 .af-element-radio input.radio:checked ~ label:before {
  background-color: #777777;
  border-color: #d6dee3;
}
#af-form-1021463792 .af-element-radio label.choice {
  border: 1px solid #d6dee3;
  border-radius: 3px !important;
  display: block !important;
  font-weight: 300 !important;
  margin: 0.5rem 0 !important;
  padding: 1rem 1rem 1rem 2rem !important;
  position: relative;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
#af-form-1021463792 .af-element-radio label.choice:before {
  background-color: #FFF;
  border: 1px solid #d6dee3;
  border-radius: 50%;
  content: '';
  height: 0.75rem;
  margin-left: -1.3rem;
  position: absolute;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  width: 0.75rem;
}
#af-form-1021463792 .buttonContainer {
  box-sizing: border-box !important;
}
#af-form-1021463792 .af-footer {
  box-sizing: border-box !important;
}

#af-form-1021463792 .af-footer p {
  margin: 0 !important;
}
#af-form-1021463792 input.submit,
#af-form-1021463792 #webFormSubmitButton {
  background-image: none;
  border: none;
  border-radius: 3px !important;
  font-weight: bold;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !Important;
  padding: 0.6rem 2.5rem !important;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
#af-form-1021463792 input.submit:hover,
#af-form-1021463792 #webFormSubmitButton:hover {
  cursor: pointer;
  opacity: 0.9;
}

#af-form-1021463792 input.text:hover {
  cursor: pointer;
  opacity: 0.9;
}

.poweredBy a,
.privacyPolicy p {
  color: #000000 !important;
  font-size: 0.75rem !important;
}
</style>
<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1021463792" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist6651476" />
<input type="hidden" name="redirect" value="https://www.google.com" id="redirect_a5aa8effa4fdd40f1b980330e0e7d9a7" />
<input type="hidden" name="meta_redirect_onlist" value="https://google.com" />
<input type="hidden" name="meta_adtracking" value="You_and_me_making_money" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />

<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1021463792" class="af-form"><div id="af-header-1021463792" class="af-header"><div class="bodyText"><h3 style="line-height:1;text-align:center;"><span style="font-size:39px;">Where should I send your <u>FREE</u> Ebook?</span><br>&nbsp;</h3><h1 style="line-height:1;text-align:center;"><span style="font-size:24px;">Make sure to continue on to the next page!</span></h1></div></div><div id="af-body-1021463792" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-116436074">Name:</label>
<div class="af-textWrap">
<input id="awf_field-116436074" type="text" name="name" class="text" value="" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" />
</div>
<div class="af-clear"></div>
</div><div class="af-element">
<label class="previewLabel" for="awf_field-116436075">Email:</label>
<div class="af-textWrap"><input class="text" id="awf_field-116436075" type="text" name="email" value="" tabindex="501" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div><div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-1021463792" class="af-footer"><div class="bodyText"><p>&nbsp;</p></div></div></div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=jAxMjCxszOycTA==" alt="" /></div>
</form>
<script type="text/javascript">
// Special handling for in-app browsers that don't always support new windows
(function() {
function browserSupportsNewWindows(userAgent) {
var rules = [
'FBIOS',
'Twitter for iPhone',
'WebView',
'(iPhone|iPod|iPad)(?!.*Safari\/)',
'Android.*(wv|\.0\.0\.0)'
];
var pattern = new RegExp('(' + rules.join('|') + ')', 'ig');
return !pattern.test(userAgent);
}
if (!browserSupportsNewWindows(navigator.userAgent || navigator.vendor || window.opera)) {
document.getElementById('af-form-1021463792').parentElement.removeAttribute('target');
}
})();
</script>
<script type="text/javascript">
<!--
(function() {
var IE = /*@cc_on!@*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-1021463792")) {
document.getElementById("af-form-1021463792").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1021463792")) {
document.getElementById("af-body-1021463792").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1021463792")) {
document.getElementById("af-header-1021463792").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1021463792")) {
document.getElementById("af-footer-1021463792").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>


<!-- /AWeber Web Form Generator 3.0.1 -->
<div class="wrap">
  <button class="button">Submit</button>
</div>

html css forms button aweber
1个回答
0
投票

我刚刚清理了那些多余的代码；对于按钮代码，我修改了以下内容：

  • 我为按钮本身设置了

    min-width: 120px
    和
    min-height: 120px;
    。如果你想先有一个圆形，你需要一个正方形和 
    border-radius:50%
    将其转换为圆形；

  • 修改了 

    min-width
    的 
    min-height
    和 
    .button::before
    和 
    width
    以及 
    height
    的 
    .button::after
    以及它们的边界半径。

  • 我还修改了

    width
    中的
    height
    和
    @keyframes ring
    ，只是为了调整脉冲效果的大小。你可以保留 300px，我认为这对于这个圈子来说太大了。

  • 就像用户体验建议一样，我建议使用盒子阴影而不在任何方向上位移，因为脉冲效果也是对称的。

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  min-width: 120px;
  min-height: 120px;
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: #313133;
  background: #4FD1C5;
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
  }

button::before {
  content: '';
  border-radius: 50%;
  min-width: calc(120px + 12px);
  min-height: calc(120px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.button:hover, .button:focus {
  color: #313133;
  transform: translateY(-6px);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

button::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 6px solid #00FFCB;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 120px;
    height: 120px;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}
<!-- /AWeber Web Form Generator 3.0.1 -->
<div class="wrap">
  <button class="button">Submit</button>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.