X-Cart forums - Replace the table based buttons with CSS!

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Replace the table based buttons with CSS! (https://forum.x-cart.com/showthread.php?t=29288)

Replace the table based buttons with CSS!

I believe it's time for replacing the table based buttons with pure css, here is a method(x-cart v. 4.1.6 to 4.1.11). :wink:
-------------------------------------------------------------------------

1) Copy attached button.tpl file to the skin1/buttons directory.

2) Copy attached but_bg.gif and but_bg_hover.gif files to the skin1/images directory.

3) Open the skin1.css file and replace Buttons classes with following code.

Code:

/*

 Buttons

*/

.FormButton { color: #860000; font-weight: bold; }

.Button, .ButtonOn { padding: 3px 10px 3px 15px; float: left; display: block; background: no-repeat left bottom; cursor: pointer; }

.Button { border-right: 1px solid #333; border-bottom: 1px solid #333; background: #c1c1c1 url(images/but_bg.gif); color: #282828; }

.ButtonOn { border-right: 1px solid #415715; border-bottom: 1px solid #415715; background: #a7d34e url(images/but_bg_hover.gif); color: #000; }

.SimpleButton { padding: 0; white-space: nowrap; }

.SimpleButton a, .SimpleButton a:hover { padding-right: 3px; color: #5d0000; font-weight: bold; text-decoration: none; }

.SimpleButton a:hover { color: #f20000; }

.GoImage { vertical-align: middle; }