[Skip to main content](#vessel-content) # change class button ## - **[upedown](/forum/user/32003-upedown "View upedown's Profile")** - [![upedown's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32003-upedown "View upedown's Profile") Topic Author - [ Offline](/forum/user/32003-upedown) Less More - Posts: 34 - Thank you received: 0 - - 12 years 4 months ago [\#161569](#161569) by [upedown](/forum/user/32003-upedown "View upedown's Profile") *[change class button](/forum/26-product-category-display/869226-change-class-button#161569 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* was created by *[upedown](/forum/user/32003-upedown "View upedown's Profile")* -- url of the page with the problem -- : [ mywebsite.com/mypage](http://mywebsite.com/mypage) -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")** - [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") - [ Offline](/forum/user/6861-mohamed-thelji) Less More - Posts: 12953 - Thank you received: 1778 - - - 12 years 4 months ago [\#161572](#161572) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[change class button](/forum/26-product-category-display/869226-change-class-button#161572 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* Hello, The solution will probably be to use the ".hikashop_cart_input_button" CSS class to change the display of your add to cart button. Also ,reading that documentation will probably help you : [ www.hikashop.com/support/documentation/1...ize-the-display.html](https://www.hikashop.com/support/documentation/153-customize-the-display.html) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[upedown](/forum/user/32003-upedown "View upedown's Profile")** - [![upedown's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32003-upedown "View upedown's Profile") Topic Author - [ Offline](/forum/user/32003-upedown) Less More - Posts: 34 - Thank you received: 0 - - 12 years 4 months ago - 12 years 4 months ago [\#161745](#161745) by [upedown](/forum/user/32003-upedown "View upedown's Profile") Replied by *[upedown](/forum/user/32003-upedown "View upedown's Profile")* on topic *[change class button](/forum/26-product-category-display/869226-change-class-button#161745 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* Thank you for answer! I don't think that this way can resolve my problem because if I change ".hikashop_cart_input_button" I change both the buttons! Maybe I'm wrong but this is the reason whereby I have to change the class in the html. I've attached two pictures. The first is the situation that I have now, the second is what I have to do. [ ![h0c47c3a.JPG](/forum/attachment/18127) ](/forum/attachment/18127 "h0c47c3a.JPG") [ ![h8d62ce3.JPG](/forum/attachment/18128) ](/forum/attachment/18128 "h8d62ce3.JPG") - [ ![h0c47c3a.JPG](/forum/attachment/18127) ](/forum/attachment/18127 "h0c47c3a.JPG") [ ](/forum/attachment/18127?download=1 "h0c47c3a.JPG") - [ ![h8d62ce3.JPG](/forum/attachment/18128) ](/forum/attachment/18128 "h8d62ce3.JPG") [ ](/forum/attachment/18128?download=1 "h8d62ce3.JPG") Last edit: 12 years 4 months ago by [upedown](/forum/user/32003-upedown "View upedown's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 12 years 4 months ago [\#161749](#161749) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[change class button](/forum/26-product-category-display/869226-change-class-button#161749 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* Hi, To change the look only for the second button, you have to use this kind of css property: Code: .hikashop_product_contact_main .hikashop_cart_button{ background-color : #ccc;} The following user(s) said Thank You: [upedown](/forum/user/32003-upedown "View upedown's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[upedown](/forum/user/32003-upedown "View upedown's Profile")** - [![upedown's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32003-upedown "View upedown's Profile") Topic Author - [ Offline](/forum/user/32003-upedown) Less More - Posts: 34 - Thank you received: 0 - - 12 years 4 months ago [\#161915](#161915) by [upedown](/forum/user/32003-upedown "View upedown's Profile") Replied by *[upedown](/forum/user/32003-upedown "View upedown's Profile")* on topic *[change class button](/forum/26-product-category-display/869226-change-class-button#161915 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* Hi Xavier! Thank you so much! This is the right way to solve my problem! Now I have the second button with different color! Last question is: I've tried to insert this code for the Hover effect Code: .hikashop_product_contact_main .hikashop_cart_button { text-decoration:none; color: #FFFFFF !important; cursor: pointer; display: inline-block; line-height: 25px; margin: 5px; padding: 3px 8px; text-align: center; box-shadow:none !important; text-shadow:none !important; border:; border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF; border-radius:4px; background-color: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eee)); background: -webkit-linear-gradient(top, #ffa100, #ffcc255); background: -moz-linear-gradient(top, #ffa100, #ffcc255); background: -o-linear-gradient(top, #ffa100, #ffcc255); background: linear-gradient(top, #ffa100, #ffcc255); width: 137px; height: 28px; } .hikashop_product_contact_main .hikashop_cart_button:Hover { text-decoration:none; color: #FFFFFF !important; cursor: pointer; display: inline-block; line-height: 25px; margin: 5px; padding: 3px 8px; text-align: center; box-shadow:none !important; text-shadow:none !important; border:; border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF; border-radius:4px; background-color: #eee; background: -webkit-linear-gradient(top, #ffcc255, #ffa100); background: -moz-linear-gradient(top, #ffcc255, #ffa100); background: -o-linear-gradient(top, #ffcc255, #ffa100); background: linear-gradient(top, #ffcc255, #ffa100); width: 137px; height: 28px; } but I can't see the change... still have the hover effect of the original button with this code Code: a.hikashop_cart_button:hover, a.hikashop_compare_button:hover, .hikashop_cart_input_button:hover{ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); display: inline-block; outline: none; border:; border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE; text-decoration:none; background-color: #f8f8f8; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8)); background: -webkit-linear-gradient(center, #619dd8, #578ECC); background: -moz-linear-gradient(center, #619dd8, #578ECC); background: -o-linear-gradient(center, #619dd8, #578ECC); background: linear-gradient(top, #619dd8, #578ECC); transition: background-position 0.1s linea 0s; } How can I set an hover effect just for the second button? Thank you again! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[lousyfool](/forum/user/28604-lousyfool "View lousyfool's Profile")** - [![lousyfool's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar28604.jpg)](/forum/user/28604-lousyfool "View lousyfool's Profile") - [ Offline](/forum/user/28604-lousyfool) Less More - Posts: 2143 - Thank you received: 747 - - [](http://www.inphase.one) - 12 years 4 months ago [\#161920](#161920) by [lousyfool](/forum/user/28604-lousyfool "View lousyfool's Profile") Replied by *[lousyfool](/forum/user/28604-lousyfool "View lousyfool's Profile")* on topic *[change class button](/forum/26-product-category-display/869226-change-class-button#161920 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* You have a syntax error in your 'new' CSS: Code: ..._button:Hover { Make it "hover" in lowercase, and it should work. P.S.: You don't need to repeat all selectors in the CSS block for hover. The ones that are to change will be enough. Saves you loading a few bytes... ![;)](/media/kunena/emoticons/11.png ";)") --- Need help with customisations of layouts, style or other site development? [ PM me!](/component/uddeim/?task=new) (Don't forget to turn on [ "E-mail notification of new messages"](/component/uddeim/?task=settings)) The following user(s) said Thank You: [upedown](/forum/user/32003-upedown "View upedown's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[upedown](/forum/user/32003-upedown "View upedown's Profile")** - [![upedown's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32003-upedown "View upedown's Profile") Topic Author - [ Offline](/forum/user/32003-upedown) Less More - Posts: 34 - Thank you received: 0 - - 12 years 4 months ago [\#161930](#161930) by [upedown](/forum/user/32003-upedown "View upedown's Profile") Replied by *[upedown](/forum/user/32003-upedown "View upedown's Profile")* on topic *[change class button](/forum/26-product-category-display/869226-change-class-button#161930 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.3.1 -- Joomla version -- : 2.5 -- PHP version -- : x.x.x -- Browser(s) name and version -- : XXXXX x.x.x -- Error-message(debug-mod must be tuned on) -- : Error_message Goodmorning! I need to change the class button of the hikashop_product_quantity_field_2 (like I see in html/firebug) but I don't know where I can find this part of code. I need to this to have a different color from standar "add to cart button". Any suggestion? Thank you in advance!")* Lousyfool thanks for your precious support! Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjkyMjYtY2hhbmdlLWNsYXNzLWJ1dHRvbj90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.382 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)