Help - Search - Members - Calendar
Full Version: Is there a way to round the corners of a submit button?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
cinque8
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
You might use the CSS3 "border-radius" property, see e.g. https://developer.mozilla.org/en-US/docs/We...S/border-radius
cinque8
Thank you for the information Christian!
cinque8
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
Here are a few ideas: https://www.w3.org/Style/Examples/007/center.en.html
cinque8
Thanks again Christian!
cinque8
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
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. happy.gif
cinque8
Thanks for the information Pandy
cinque8
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">&nbsp; <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
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
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"'.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.