| The following instructions explain
how to change the look of your eButtonz buy buttons using CSS (cascading
style sheets). Not suitable if you are using images as your buy buttons.
A buy button with style "Text & Price"
or "Text" only will look like a standard gray form button.
However, if you use CSS you can make the gray button, their borders
and the button text change color and size. To do this you need to add
some simple CSS code to the head section of your web page such as the
example below:
<html>
<head>
<title>Products</title>
<ebuttonz_script>
(eButtonz code removed for demonstration purposes only -do not edit your original code)
</ebuttonz_script>
<style type="text/css">
<!--
input {
BACKGROUND-COLOR: #330066;
WIDTH: 100px;
HEIGHT: 22px;
BORDER: 1px solid #6666FF;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #FFFF00;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
}
-->
</style>
</head>
The above selections will cause your buy button to
look like this:
Note that an eButtonz buy button with style "Text & Price" & "Image" will generate a form button with an "input" attribute. The CSS effects all form elements with an input attribute.
In the CSS example above the WIDTH:
75px and HEIGHT: 22px attributes should
match the size of any image used in the eButtonz buy button style
= "Image". If these sizes in the CSS do not match your
image it will appear distorted.
Considerations
By adding this code to your web page ALL form elements with an input attribute will be effected by the CSS - which may not be what you want. To prevent this create additional CSS definitions for your own form elements that share the input attribute.
<style type="text/css">
<!--
input {
BACKGROUND-COLOR: #330066;
WIDTH:75px;
HEIGHT: 22px;
BORDER: 1px solid #6666FF;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #FFFF00;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-ALIGN: left;
}
.mybutton {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
height: 25px;
width: 100px
}
-->
</style>
</head>
Note that input does not have a "." before it and mybutton does. This means that any element in your web page with an input attribute will attract this CSS class. The "." means that only form elements with "class=mybutton" will attract this CSS class.
Now in your web page attach the CSS class to your own form button as shown below:
<form name="form1" method="post"
action=whatever.cgi"">
<input type="submit" name="Submit"
value="Submit" class="mybutton">
</form>
|