[tech@industrialzone.com]

Hello,

The X-Cart version I am using is 4.2.2

Could someone please help me with the design of Clear Cart and Checkout buttons in the Cart Page

I created a new image for the left and right side of the button, but I am unable to align both the sides to create a complete button.

Please find the css for the buttons from skin1/main.css. Let me know where the changes needs to be made. I have tried many changes but in vain.

/*
buttons
*/
/* button-based */
button.button {
border: 0px none;
background-color: transparent;
cursor: pointer;
height: 22px;
margin: 0px;
padding: 0px;
vertical-align: top;
overflow: visible;
outline-style: none;
}
button.button .button-right {
display: block;
background: transparent url(images/but_main_right grey.png) no-repeat right top;
padding: 0px 10px 0px 0px;
height: 22px;
}
button.button .button-left {
display: block;
margin: 0px;
background: transparent url(images/but_main_left grey.png) no-repeat left top;
padding: 0px 5px 0px 15px;
vertical-align: middle;
white-space: nowrap;
font-family: verdana, arial, helvetica, sans-serif;
color: #cc2727;
font-weight: bold;
font-size: 11px;
height: 22px;
line-height: 21px;
}
/* div-based */
div.button {
border: 0px none;
background: transparent none;
cursor: pointer;
margin: 0px;
padding: 0px 10px 0px 0px;
white-space: nowrap;
/*clear cart checkout button right side */
/* background: transparent url(images/but_main_right grey.png) no-repeat right top;*/
float: left;
}
div.button div,
div.button a:link,
div.button a:visited,
div.button a:hover,
div.button a:active
{
display: block;
/* background: transparent url(images/but_main_left grey.png) no-repeat left top;*/
line-height: 21px;
padding: 0px 5px 0px 5px;
white-space: nowrap;
font-family: verdana, arial, helvetica, sans-serif;
color: #111d4d;
font-weight: bold;
font-size: 11px;
text-decoration: none;
outline-style: none;
}
/* button-based link */
button.simple-button {
border: 0px none;
background-color: transparent;
cursor: pointer;
height: 15px;
margin: 3px 0px 0px 0px;
padding: 0px;
white-space: nowrap;
color: #000000;
font-size: 11px;
font-weight: bold;
line-height: 15px;
vertical-align: middle;
outline-style: none;
}
button.simple-button span {
/* text-decoration: underline;*/
}
button.simple-button img {
display: none;
}
/* a-based link */
a.simple-button:link,
a.simple-button:visited,
a.simple-button:hover,
a.simple-button:active
{
font-size: 11px;
white-space: nowrap;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 0px;
line-height: 21px;
vertical-align: bottom;
text-decoration: underline;
outline-style: none;
}
/* input-image-based */
input.image-button {
margin: 0px;
margin-bottom: 1px;
padding: 0px;
border: 0px none;
width: 20px;
height: 20px;
background: transparent url(images/go_red.gif) no-repeat left top;
vertical-align: middle;
}
/* a-image-based */
a.image-button:link,
a.image-button:visited,
a.image-button:hover,
a.image-button:active
{
text-decoration: none;
}
a.image-button:link img,
a.image-button:visited img,
a.image-button:hover img,
a.image-button:active img
{
margin: 0px;
padding: 0px;
border: 0px none;
width: 20px;
height: 18px;
background: transparent url(images/go.gif) no-repeat center center;
vertical-align: middle;
}
/*
Buttons alternative styles
*/
/* highlighted button */
button.main-button .button-right {
/* background: transparent url(images/but_main_right grey.png) no-repeat right top;*/

}
button.main-button .button-left {
/* background: transparent url(images/but_main_left grey.png) no-repeat left top;*/
color: #510000;
}
div.main-button {
/* background: transparent url(images/but_main_right grey.png) no-repeat right top;*/

}
div.main-button div,
div.main-button a:link,
div.main-button a:visited,
div.main-button a:hover,
div.main-button a:active
{
/* background: transparent url(images/but_main_left grey.png) no-repeat left top;*/
color: #510000;
}
button.simple-main-button,
a.simple-main-button:link,
a.simple-main-button:visited,
a.simple-main-button:hover,
a.simple-main-button:active
{
color: #880000;
}
/* Delete cart item button */
a.simple-delete-button:link,
a.simple-delete-button:visited,
a.simple-delete-button:hover,
a.simple-delete-button:active
{
color: #880000;
/*background: transparent url(images/delete_cross.gif) no-repeat left 7px;*/
padding-left: 13px;
}
/* menu button */
button.menu-button {
height: 22px;
}
button.menu-button .button-right {
background: url(images/but_main_right grey.png) no-repeat right top;
padding-right: 7px;
height: 22px;
}
button.menu-button .button-left {
background: url(images/but_main_left grey.png) no-repeat left top;
height: 22px;
/*padding: 0px 1px 0px 8px;*/
color: #000000;
font-size: 10px;
height: 21px;
line-height: 20px;
}
div.menu-button {
/* background: url(images/but_main_right grey.png) no-repeat right top;*/
padding-right: 7px;
}
div.menu-button div,
div.menu-button a:link,
div.menu-button a:visited,
div.menu-button a:hover,
div.menu-button a:active
{
background: url(images/but_main_left grey.png)
no-repeat left top;
padding: 0px 1px 0px 8px;
line-height: 21px;
color: #000000 !important;
font-size: 10px;
}
/*
link-with-arrow
*/
a.simple-arrow-button:link,
a.simple-arrow-button:visited,
a.simple-arrow-button:hover,
a.simple-arrow-button:active
{
padding-left: 10px;
background: transparent url(images/category_bullet_red.gif) no-repeat left 6px;
}
a.simple-arrow-button:hover {
color: #cc2727;
}
.rtl a.simple-arrow-button:link,
.rtl a.simple-arrow-button:visited,
.rtl a.simple-arrow-button:hover,
.rtl a.simple-arrow-button:active
{
padding-left: 0px;
padding-right: 10px;
background: transparent url(images/but_arrow_invert.png) no-repeat right 6px;
}
.button-row a.simple-arrow-button:link,
.button-row a.simple-arrow-button:visited,
.button-row a.simple-arrow-button:hover,
.button-row a.simple-arrow-button:active
{
background-position: left 2px;
}
button.simple-arrow-button img.left-simple-button {
display: inline;
width: 7px;
height: 10px;
background: transparent url(images/but_arrow_grey.png) no-repeat left top;
margin-right: 3px;
vertical-align: bottom;
}