add to cart button on homefeatured

[Zen_j1]

I am using prestashop 1.5.4.1 in order to Have "add to cart" button on homefeatured  I have added following code to homefeatured.css. I copied the code from product_list.css. "Add to cart" Button appears but it is in large rectangular shape. I have also attached image with this post. I request you to take a look and if possible let me know how to make button look like product list.

 

#featured-products_block_center li .ajax_add_to_cart_button span {        
        display: block;
        position: absolute;
        top: -1px;
        left: -12px;
        height: 26px;
        width: 26px;
        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;        
        }



#featured-products_block_center li span.exclusive {display:block;}

Edited February 5, 2014 by kartik_jh1 (see edit history)

[NemoPS]

Can you link your site so we can inspect it directly?

[Zen_j1]

Can you link your site so we can inspect it directly?

 

 

Edited February 11, 2014 by Zen_j1 (see edit history)

[NemoPS]

Add float left to this #featured-products_block_center li .ajax_add_to_cart_button.

Then, you might also add position:relative and shift it up if needed

[Zen_j1]

Add float left to this #featured-products_block_center li .ajax_add_to_cart_button.

Then, you might also add position:relative and shift it up if needed

Thanks for your reply i have added what you have suggested still there is no change in add to cart button now the code look like given below. please let me know if i am missing something

 

path of code mysite/ modules / homefeatured / homefeatured.css

 

#featured-products_block_center li .ajax_add_to_cart_button span {

        float: left;

        display: block;

        position: relative;

        top: -1px;

        left: -12px;

        height: 26px;

        width: 26px;

        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;        

        }

Edited February 5, 2014 by kartik_jh1 (see edit history)

[NemoPS]

Because you didn't do what I said.

#featured-products_block_center li .ajax_add_to_cart_button

 

without span

[Zen_j1]

I have removed span. Now it has a look of small square white box with add and not aligned. Please take a look make suggestion how to make it look like add to cart button on product list

[Zen_j1]

Now I have changed the code to :-

 

#featured-products_block_center li .ajax_add_to_cart_button  {
        float: left;
       text-align: center;
       margin-left:15px;
        position: relative;
        width: 16px;         
        }

 

Removed  background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;      

 

This shows small yellow button. If above background code is added it just show white box with slight yellow from backside is there any way to add red color cart image next to yellow button as on product list.

Edited February 6, 2014 by kartik_jh1 (see edit history)