The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Is there a way to round the corners of a submit button?
cinque8
post 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 -->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 30 2017, 02:03 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,736
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cinque8
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cinque8
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 31 2017, 01:25 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



Here are a few ideas: https://www.w3.org/Style/Examples/007/center.en.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cinque8
post Oct 31 2017, 04:51 PM
Post #6


Newbie
*

Group: Members
Posts: 14
Joined: 30-August 12
Member No.: 17,706



Thanks again Christian!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cinque8
post 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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2017, 09:45 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
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. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cinque8
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
cinque8
post 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">&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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 6 2017, 10:04 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 6 2017, 11:32 AM
Post #12


This is My Life
*******

Group: Members
Posts: 1,437
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"'.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2017 - 02:12 PM