Trying to round the courners of my submit button

cinque8 · November 6, 2017

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>

div.af-clear {

border-radius: 20px;

}

</style>

</head>

<head>

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>

Ingolme · November 6, 2017

.submit {
  border-radius: 20px;
}

cinque8 · November 6, 2017

Ingolme,

THANK YOU ! THANK YOU ! THANK YOU !

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:

codeminer · November 6, 2017

this works two

input[type=submit] {

border-radius: 5px;

border: 0;

width: 80px;

height:25px;...
}

cinque8 · November 6, 2017

And if you look at the HTML code above something called pbzloc keeps appearing.

What the heck is that?

pbzloc

Ingolme · November 6, 2017

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.

cinque8 · November 7, 2017

Will do.

I used PageBreeze HTML editor to build my page, and it looks like pbzloc is some sort of formatting tool that PageBreeze uses.

Thanks!

cinque8 · November 7, 2017

Ingolme,

I went back over the code and I still do not see it. Could you please tell me how you selected the element "submit".

Thanks!

codeminer · November 7, 2017

<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">                                                                                                                                                     <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-element">
<p style="text-align: center"><span style="font-size: 26px"><strong><span pbzloc="18" style="color: #ff0000"> <label class="previewLabel" for="awf_field-93026631" pbzloc="43">Email: </label></span></strong></span></p>

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

Edited November 7, 2017 by codeminer

cinque8 · November 7, 2017

Thanks Codeminer!

codeminer · November 7, 2017

no problem, i hope you getter done!

Ingolme · November 7, 2017

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.

cinque8 · November 7, 2017

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!

cinque8 · November 12, 2017

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 November 12, 2017 by cinque8

Ingolme · November 12, 2017

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

cinque8 · November 14, 2017

Thank you for the information

shaili_shah · November 22, 2019

you have to apply border-radius:

.submit {
border-radius: 25px;
}

Max Castril · December 12, 2019

I have been trying to change the size, font, colour etc. of the submit button as it is too insignificant in my page. I tried this in W3Schools Tryit Editor but doesn't work:

<!DOCTYPE html>
<html>
<head>
<style>
.submit {
border-radius: 10px;
width: 60%;
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>

<form action="/action_page.php">
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br><br /><br />
<input type="submit" value="Submit form">
</form>

</body>
</html>

in https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_value

Any ideas?

dsonesuk · December 12, 2019

'.' Means a class identifier, .submit means class with value of 'submit'. Since you have no class="submit" your styling for that clasd name won't be applied.

Max Castril · December 14, 2019

Sorted it! Changed submit from <input type="submit"> to <input type="button" value="Click me" onclick="msg()">

https://www.w3schools.com/tags/att_input_type_button.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button

Works anyway but I still hate CSS😝.

Trying to round the courners of my submit button

Recommended Posts

cinque8 0

Link to post

Share on other sites

Ingolme 1,021

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

codeminer 0

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

Ingolme 1,021

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

codeminer 0

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

codeminer 0

Link to post

Share on other sites

Ingolme 1,021

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

Ingolme 1,021

Link to post

Share on other sites

cinque8 0

Link to post

Share on other sites

shaili_shah 2

Link to post

Share on other sites

Max Castril 0

Link to post

Share on other sites

dsonesuk 914

Link to post

Share on other sites

Max Castril 0

Link to post

Share on other sites

Join the conversation