I used many ads-on posted in this forum and I decided to make a donation. Everybody who tried to modify buttons design knows that itâ–“s tricky. I created CSS buttons with mouse-over effect. Here is the page
sample:
http://www.clikinternational.com/free/buttons/sample.html
There are 10 color variations. These CSS classes can be applied to <a>, <table>, <div>, <span> tags. And the best part is that they work with <table> based buttons
onClick event.
How to add buttons in x-cart:
1. Download the files:
http://www.clikinternational.com/free/buttons/ColorButtons.zip
2. Copy CSS code from
buttons.css file and ad to your
skin1.css file.
3. Upload
buttons folder into your
skin1/images/
4. Modify skin1/buttons/
button.tpl file:
Replace:
Code:
<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" style="cursor: pointer;" valign="middle"{if $title ne ''} title="{$title}"{/if}>
<TR><TD><{$img_type} src="{$ImagesDir}/but1.gif" width="7" height="14" border="0"{if $title ne ''} title="{$title}"{/if}></TD>
<TD class="Button" valign="middle" nowrap><FONT class="Button"> {$button_title} </FONT></TD>
<TD><IMG src="{$ImagesDir}/but2.gif" width="7" height="14" border="0"{if $title ne ''} title="{$title}"{/if}></TD></TR>
</TABLE>
with
Code:
<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonRed" {if $title ne ''} title="{$title}"{/if}>
<TD nowrap> {$button_title} </TD>
</TABLE>
You can change class="
ButtonRed" on other class from the CSS code.
Buttons look perfect in Firefox and Safari (Mac). Please let me know if there are any problems with other browsers. I used this code for
my online store that is
4.0.11. (I know it's old version but it works.) I hope it works in new version of x-cart.
Anyways, you are free to use these CSS styles for your other projects.
Question to experts (I'm just a designer with some knowledge of coding):
How to apply different classes to different buttons? For example:
Add to cart -> ButtonRed
Add to wish list -> ButtonGrey,
etc...
Thank you.