Jump to content

Enhancing my submit button


Recommended Posts

Hello,

 

button2.png

<input type="submit" value="Subscribe" />

 

I was wondering if anyone could tell me how I could enhance my submit button by:

 

1. Doubling the size

 

2.Rounding the corners

 

3. Placing a silver border around the button

 

4. Changing the background color to red

 

5. Changing the text color to white.

 

I use the PageBreeze HTML editor, Any help will be greatly appreciated!

 

Thank you

Link to post
Share on other sites
  • 3 weeks later...

JSFiddle site is very useful, but Firefox and Chrome (and probably the others) allow you to right-click on an HTML page element and click "inspect" or "inspect element". From there, you can "fiddle" with the CSS in the styles tab or area. Changes are real time, so you can adjust or add values there until you see what you want.

 

I'm in this area a lot to view ajax responses and replay requests for error checking. As I'm just getting back into all of this, the capabilities here are pretty amazing.

Link to post
Share on other sites

First off, is there a specific reason you are using an INPUT button for your submit as opposed to a simple 'button' element? I typically see inputs used when there is really no need for it.

 

Do you want the style to only apply to one button or to all buttons? If you want it to apply to all buttons, then define the properties for 'button' in your css style properties.

<head>
<style>
button {
   ## properties go here ##
}
</style>

If you want the style to apply to just one (or some buttons), create the button with a class name

<input type="submit" value="Subscribe" class="specialButton" />

Then in your style properties set properties for that class name

<head>
<style>
.class_name_of_button {
    padding: 14px 30px;
    margin: 4px 2px;
    font-size: 16px;
    border: 2px solid #C0C0C0;
    border-radius: 25px;
    background-color: #ff0000;
    color: white;
    display: inline-block;
    cursor: pointer;
}
</style>

Notes:

 

1) Style properties are one thing that do not have complete comparability between browsers. So, be sure to check the display in the different browsers you intend to support.

 

2) Be sure to change the padding/margin of the button to increase the size instead of hard coding a specific size (via height & width). Otherwise you could end up cutting off text. Even if you hard code it and ensure it looks right on your monitor does not mean it would look right for someone else.

Edited by Psycho
Link to post
Share on other sites
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.