Is there a way to round the corners of a submit button? |
Is there a way to round the corners of a submit button? |
cinque8 |
Oct 30 2017, 01:13 PM
Post
#1
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Hello,
is there a way to round the corners of a submit button. I have attached the code for my form. Thank you CODE <form accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" class="af-form-wrapper" method="post" target="_blank"> <div pbzloc="39" style="display: none"><input name="meta_web_form_id" type="hidden" value="1991411101" /> <input name="meta_split_id" type="hidden" /> <input name="listname" type="hidden" value="awlist4806168" /> <input id="redirect_41e503e55e268d841032ed3217e9f27e" name="redirect" type="hidden" value="http://launchpointforgrowingtaller.info/thankyou.html" /> <input name="meta_adtracking" type="hidden" value="Grow_Taller_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" /></div> <div class="af-form" id="af-form-1991411101"> <div class="af-header" id="af-header-1991411101"> <div class="bodyText"> <p pbzloc="40"></p> </div> </div> <div class="af-body af-standards" id="af-body-1991411101"> <div class="af-element"><span style="font-size: 26px"><strong><span style="color: #ff0000"> <label class="previewLabel" for="awf_field-93026630">First Name: </label></span></strong></span> <div class="af-textWrap"><input class="text" id="awf_field-93026630" name="name" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" pbzloc="32" size="16" style="height: 34px; width: 254px" tabindex="500" type="text" /></div> <div class="af-clear"></div> </div> <div class="af-element"><span style="font-size: 26px"><strong><span style="color: #ff0000"> <label class="previewLabel" for="awf_field-93026631" pbzloc="43">Email: </label></span></strong></span> <div class="af-textWrap" pbzloc="42"><input class="text" id="awf_field-93026631" name="email" onblur="if (this.value == '') { this.value='';} " onfocus=" if (this.value == '') { this.value = ''; }" pbzloc="33" style="height: 35px; width: 254px" tabindex="501" type="text" /></div> <div class="af-clear" pbzloc="49"></div> </div> <div class="af-element buttonContainer"> <div class="af-clear" pbzloc="45"> <span style="color: #ff0000"><input class="submit" name="submit" pbzloc="50" size="1" style="height: 51px; width: 143px; background-color: #ff0000; color: white; font-size: 1.2em;" tabindex="502" type="submit" value="Submit" /></span></div> </div> <div class="af-element privacyPolicy" style="text-align: center"> <p>We respect your <a href="https://www.aweber.com/permission.htm" rel="nofollow" target="_blank" title="Privacy Policy">email privacy</a></p> <div class="af-clear" pbzloc="51"></div> </div> </div> <div class="af-footer" id="af-footer-1991411101"> <div class="bodyText"> <p></p> </div> </div> </div> <div style="display: none"><img alt="" src="https://forms.aweber.com/form/displays.htm?id=jJycjCyMjIwMjA==" /></div> </form> <script type="text/javascript"> <!-- (function() { var IE = /*@cc_on!@*/false; if (!IE) { return; } if (document.compatMode && document.compatMode == 'BackCompat') { if (document.getElementById("af-form-1991411101")) { document.getElementById("af-form-1991411101").className = 'af-form af-quirksMode'; } if (document.getElementById("af-body-1991411101")) { document.getElementById("af-body-1991411101").className = "af-body inline af-quirksMode"; } if (document.getElementById("af-header-1991411101")) { document.getElementById("af-header-1991411101").className = "af-header af-quirksMode"; } if (document.getElementById("af-footer-1991411101")) { document.getElementById("af-footer-1991411101").className = "af-footer af-quirksMode"; } } })(); --> </script><!-- /AWeber Web Form Generator 3.0.1 --> |
Christian J |
Oct 30 2017, 02:03 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
You might use the CSS3 "border-radius" property, see e.g. https://developer.mozilla.org/en-US/docs/We...S/border-radius
|
cinque8 |
Oct 31 2017, 01:01 PM
Post
#3
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Thank you for the information Christian!
|
cinque8 |
Oct 31 2017, 01:20 PM
Post
#4
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Can I ask one more question?
The form that I downloaded from Aweber sits on the far left of the page? How would I move the form to the center of the page? Thank you |
Christian J |
Oct 31 2017, 01:25 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Here are a few ideas: https://www.w3.org/Style/Examples/007/center.en.html
|
cinque8 |
Oct 31 2017, 04:51 PM
Post
#6
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Thanks again Christian!
|
cinque8 |
Nov 5 2017, 08:24 PM
Post
#7
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Hello,
I have tried to round the corners of my submit button using the CSS border-radius property but I haven't had any success. I have placed several variations into the head section of my document but nothing works. Can anyone please tell me what I am doing wrong here? Thank you <head> <style type="text/css"> div.af-clear { border-radius: 20px; } </style> </head> <head> <style type="text/css"> div#af-clear { border-radius: 20px; } </style> </head> <head> <style> div.af-clear { border-radius: 20px; } </style> </head> <head> <style> div#af-clear { border-radius: 20px; } </style> </head> |
pandy |
Nov 5 2017, 09:45 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You must apply border-radius to the submit button itself, not to a DIV. It's the submit button that has the border, right? And it's enough if you do it once.
|
cinque8 |
Nov 5 2017, 11:27 PM
Post
#9
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Thanks for the information Pandy
|
cinque8 |
Nov 6 2017, 09:55 AM
Post
#10
|
Newbie Group: Members Posts: 14 Joined: 30-August 12 Member No.: 17,706 |
Pandy,
I still cannot get the corners to round. Below is the HTML code for the button. Can you show me how you would code this? Thanks! <div class="af-element buttonContainer"> <div class="af-clear" pbzloc="19" style="text-align: center"> <span style="color: #ff0000"><input class="submit" name="submit" pbzloc="50" size="1" style="font-size: 1.2em; height: 51px; width: 143px; color: white; background-color: #ff0000" tabindex="502" type="submit" value="Submit" /></span></div> </div> |
pandy |
Nov 6 2017, 10:04 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
CODE .submit { border-radius: 20px } I don't know what the DIV is for, but you don't need the SPAN. Just use color with the style rule for the submit button. You don't need DIVs or SPANs as hangers for CSS. Well, sometimes you do, but that's special situations. |
CharlesEF |
Nov 6 2017, 11:32 AM
Post
#12
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I don't even see a submit button. I see an <input> with a class and a name of 'submit'. To be a real submit button the input needs 'type="submit"'.
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:37 PM |