Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Is there a way to round the corners of a submit button?

Posted by: cinque8 Oct 30 2017, 01:13 PM

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">
    
</script>

Posted by: Christian J Oct 30 2017, 02:03 PM

You might use the CSS3 "border-radius" property, see e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Posted by: cinque8 Oct 31 2017, 01:01 PM

Thank you for the information Christian!

Posted by: cinque8 Oct 31 2017, 01:20 PM

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

Posted by: Christian J Oct 31 2017, 01:25 PM

Here are a few ideas: https://www.w3.org/Style/Examples/007/center.en.html

Posted by: cinque8 Oct 31 2017, 04:51 PM

Thanks again Christian!

Posted by: cinque8 Nov 5 2017, 08:24 PM

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>

Posted by: pandy Nov 5 2017, 09:45 PM

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.

Posted by: cinque8 Nov 5 2017, 11:27 PM

Thanks for the information Pandy

Posted by: cinque8 Nov 6 2017, 09:55 AM

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>

Posted by: pandy Nov 6 2017, 10:04 AM

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.

Posted by: CharlesEF Nov 6 2017, 11:32 AM

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"'.