How do I embed CSS Buttons into my HTML EZ Pages?

[danielosko]

Hello Everyone,

I am upgrading to Zen Cart Version 1.54 on my home server before I publish it. I love the CSS buttons with there fade effects! And since all other pages use these CSS buttons, I would like to know how to incorporate these into my HTML EZ Pages.

Any thoughts?

Thanks,
Danny Osko

[kobra]

Suggest you search for css buttons - or go to w3schools.com
http://www.w3schools.com/bootstrap/b...ss_buttons.asp

[lat9]

For a link-type button, a back-button specifically, the HTML generated looks like:

<div class="buttonRow back"><a href="http://www.example.com/index.php?main_page=index"><span class="cssButton normal_button button  button_back" onmouseover="this.className='cssButtonHover normal_button button  button_back button_backHover'" onmouseout="this.className='cssButton normal_button button  button_back'">&nbsp;Back&nbsp;</span></a></div>

You'll replace
www.example.com with your store's URL
main_page=index with the page (and optionally, parameters too) to which the link should go on click
button_back (3 times) with a class name specific to that button (in case you want special styling)
 Back;  with the text you want displayed in the button

That will result in an EZ-Page button that matches the styling of all the auto-generated buttons in your store.

[danielosko]

Thank You!

It's been a few weeks since I was able to get back to this, but your info set me on the correct path. I finally came up with this slight modification to place a "BACK" button on any page and have it go to the previous page. Here is the code:

<div class="buttonRow back">
<a href="javascript:void(0)" onclick="history.back()">
<span class="cssButton normal_button button button_back" onmouseover="this.className='cssButtonHover normal_button button button_back button_backHover'" onmouseout="this.className='cssButton normal_button button button_back'">&nbsp;Back&nbsp;</span></a></div>