Jump to content
cinque8

Trying to round the courners of my submit button

Recommended Posts

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>
<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="17">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="font-size: 26px"><strong><span pbzloc="16" style="color: #ff0000"><label class="previewLabel" for="awf_field-93026630">First Name: </label></span></strong></span></p>
</div>
</div>

<div class="af-body af-standards" id="af-body-1991411101">
<div class="af-element">
<div class="af-textWrap" pbzloc="15" style="text-align: center"><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" style="text-align: center"></div>
</div>

<div class="af-element">
<p style="text-align: center"><span style="font-size: 26px"><strong><span pbzloc="18" style="color: #ff0000">&nbsp;<label class="previewLabel" for="awf_field-93026631" pbzloc="43">Email: </label></span></strong></span></p>

<div class="af-textWrap" pbzloc="42" style="text-align: center"><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="12" style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

<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>

<div class="af-element privacyPolicy" style="text-align: center">
<p>&nbsp;&nbsp;&nbsp; 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"></div>
</div>
</div>

<div style="display: none"><img alt="" src="https://forms.aweber.com/form/displays.htm?id=jJycjCyMjIwMjA==" /></div>
</form>

 

</head>
 
 
 
<head>
<style>
div#af-clear {
border-radius: 20px;
}
</style>
</head>

image.png

Share this post


Link to post
Share on other sites
.submit {
  border-radius: 20px;
}

 

Share this post


Link to post
Share on other sites

Ingolme,

THANK YOU ! THANK YOU ! THANK YOU !:D

I have been all over the Internet searching for answers to this.

And you would really be surprised at some of the responses that I got from so-call experts!

Thanks again !!!:lol:

Share this post


Link to post
Share on other sites

this works two

input[type=submit] {

  border-radius: 5px;

  border: 0;

  width: 80px;

  height:25px;...                    
}

Share this post


Link to post
Share on other sites

It looks like something that's being generated by the software that's building your page.

You should learn more about CSS selectors. The issue you had was simply not applying the style to the correct element.

Share this post


Link to post
Share on other sites

<head>
<style type="text/css">
div.af-clear {
border-radius: 20px;
}
</style>
</head>
 
 
<head>
<style type="text/css">
div#af-clear {
border-radius: 20px;
}

/*______________________________________________________________________________

I tested this, it works!

add the code below to your css  */

___________________________________________________________________________*/

input[type=submit] {

  border-radius: 20px;

  border: 0;

  width: 80px;

  height:25px;...                    
}

/*________________________________________________*/
</style>
</head>
 
 
<head>
<style>
div.af-clear {
border-radius: 20px;
}
</style>
<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="17">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="font-size: 26px"><strong><span pbzloc="16" style="color: #ff0000"><label class="previewLabel" for="awf_field-93026630">First Name: </label></span></strong></span></p>
</div>
</div>

<div class="af-body af-standards" id="af-body-1991411101">
<div class="af-element">
<div class="af-textWrap" pbzloc="15" style="text-align: center"><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" style="text-align: center"></div>
</div>

<div class="af-element">
<p style="text-align: center"><span style="font-size: 26px"><strong><span pbzloc="18" style="color: #ff0000">&nbsp;<label class="previewLabel" for="awf_field-93026631" pbzloc="43">Email: </label></span></strong></span></p>

<div class="af-textWrap" pbzloc="42" style="text-align: center"><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="12" style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

<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>

<div class="af-element privacyPolicy" style="text-align: center">
<p>&nbsp;&nbsp;&nbsp; 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"></div>
</div>
</div>

<div style="display: none"><img alt="" src="https://forms.aweber.com/form/displays.htm?id=jJycjCyMjIwMjA==" /></div>
</form>

Edited by codeminer

Share this post


Link to post
Share on other sites

This is the button you are trying to give rounded corners to:

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

It has "submit" as the value of the class attribute, therefore we use the class selector ".submit" to target the element.

Share this post


Link to post
Share on other sites

Thank you Ingolme and Codeminer for the very helpful information. Apparently, there is more than one way to achieve this. I will definitely study this information.

I posted this question on a few other sites and got a couple of very creepy responses.

Thanks again!;)

Share this post


Link to post
Share on other sites

Hello,

and because of the help that I received in this forum I now have rounded corners on my Submit button.

I do have another question. I have another website located at:

http://bestfibroidhealthcare.info/

In my form at the bottom of the page, the First Name box, and the Best Email box are located on the far right of the form. Is there any way to move those 2 boxes to the center of the form?

Thanks again.

fibroids.html

Edited by cinque8

Share this post


Link to post
Share on other sites

The problem is that you give the inputs an "af-textWrap" class which sets its width to 70% and shifts it to the right.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×