#1 Shopping Cart Ecommerce Solutions Home Page


   Discover The Advantages
 
 

#1 Shopping Cart
Ecommerce Solutions Home

     More Details
MasterCard Visa American Express

Photographers
Photography System
Online Photo Proofing
for Photographers


UK Photographers
Photography System
Online Photo Proofing
for Photographers


Cool New Product
FRS GMRS
Walkie Talkie Watch


Website Optimization
for Photographers
Website Optimization
for Photographers






FAQ
Payment Processing
Frontpage Shopping Cart
Secure Server
Online invoices
Shopping Cart Panels
State Taxes
Cart Appearance
Passwords
Return URL
Custom Buy Now Buttons
Mouse Over Buy Now Buttons
Html Color Code Chart - Hex And RGB Values
Flat Rate Shipping
Display Quantity Input Textbox

Header

Shopping Cart Ecommerce Solutions


Custom Form Buttons

How to change the size, color, font styles of the "Buy Now" classic depressable buttons. By default, the wizards will create grey classic depressable form buttons for your "Order Now", "View Cart", and "CheckOut" buttons shown below.

           

Let's keep it simple to start and just change the background color, text color, and text size of a button.

Here is an example of changing the font size. By changing the font size, we also change the button size. The button will adjust to the size needed to fit the text automatically. We'll change the text size to 8pt.

All we did to change the font size of our buttons is place a piece of STYLE code in our button. ( STYLE="font-size:8pt; )

<input TYPE="submit" VALUE="Buy Now" STYLE="font-size:8pt">

Now let's change the background color to blue or #00BFFF by adding "background-color:#00BFFF" to the style.

<input TYPE="submit" VALUE="Buy Now" STYLE="font-size:8pt; background-color:#00BFFF">

Note that there is a ; between each attribute

While we will show you a little more custom changes you can make below, the font color is all you will probably need to customize you buttons by adding "color:#ffffff" for white to the style.

<input TYPE="submit" VALUE="Buy Now" STYLE="font-size:8pt; background-color:#00BFFF; color:#ffffff">

It's possible to change all of the buttons on one page with one piece of code inbetween your <head> tags at the top of your html page.

<head>

<style type="text/css">
<!--
INPUT {
background: #00BFFF;
color: #ffffff;
font-size: 8pt;
}
-->
</style>

</head>


Here are some other more advanced featured examples:


Change the buttons height and width.


Change the border color: ( Color Chart )


Change the font color and style. ( Color Chart )


To be bold or not to be bold.


Font Size.


Text Alignment


The most popular attributes are:

Height and Width
Background Color
Border Color Text Color
Font Family IE. Arial, Verdana, ms sans serif
Font Weight IE. bold
Font Size
Text Alignment

Were going to show you how to use Cascading style sheets (CSS), to accomplish this task. CSS is an entire subject in itself. Were only going to cover relavant features that apply to form buttons.

(Partial) CSS support was introduced with Internet Explorer 3.01 and Netscape 4.0 and has been steadily improved with successive browsers since then.

The best part is you only have to place one tag into your webpage that will change all of your buttons at once. Placed the tag below in between your <HEAD> </HEAD> tags at the top of your HTML document.


     <style type="text/css">
<!--
INPUT {
height: 50px;
width: 150px;
background-color: #efefef;
border-color: #efefef;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 12pt;
text-align: right;
}
-->
     </style>



How to use the default setting

If you did not want to change a certain attribute or you wanted to let browser decide which is best, either remove the line or delete the configuration setting. Example below we will let the browser decide height and width based on text size and lenth.

     <style type="text/css">
<!--
INPUT {
height:;
width:;
background-color: #efefef;
border-color: #efefef;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: bold;
font-size: 12pt;
text-align: right;
}
-->
     </style>



Select a topic:

Payment Processing
How are my credit card orders processed?

Frontpage Shopping Cart
Easily add our shopping cart code using Microsoft FrontPage.

Secure Server
Secure Sockets Layer technology ensures all shopping cart transactions cannot be intercepted during an ecommerce transaction.

Online invoices
What do the invoices look like?

Shopping Cart Panels
Adding logos and background colors to the shopping cart panels

State Taxes
Setup and configure taxes for your state.

Cart Appearance
Customizing the colors of your shopping cart tables.

Passwords
Forget your password?

Return URL
How to return to a specific page when clicking "continue shopping" button.

Custom Buy Now Buttons
How to change the size, color, font styles. etc. of your depressable Buy Now buttons.

Mouse Over Buy Now Buttons
Setup your buttons with custom background colors that change when the mouse hovers over them.

Html Color Code Chart - Hex And RGB Values
Html Color Code Chart - Hex And RGB Values for background and table values.

Flat Rate Shipping
Setting up your Shopping Cart Ecommerce Solution to charge shipping based on a flat rate.

Display Quantity Input Textbox
Your customer can specify quantity with the buy now button on your site.


© 2003 #1 Shopping Cart Ecommerce Solutions. All rights reserved.