{"id":13339,"date":"2023-05-06T02:03:13","date_gmt":"2023-05-06T06:03:13","guid":{"rendered":"https:\/\/buzapps.net\/info\/?post_type=knowledgebase&#038;p=13339"},"modified":"2023-05-07T23:32:19","modified_gmt":"2023-05-08T03:32:19","slug":"add-a-background-hover-color-when-you-click-a-button-2","status":"publish","type":"knowledgebase","link":"https:\/\/buzapps.net\/info\/knowledgebase\/how-to\/add-a-background-hover-color-when-you-click-a-button-2\/","title":{"rendered":"Add A Background \/ Hover Color When You Click A Button"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Here is a small snippet to add&nbsp;a&nbsp;background\/hover color&nbsp;when you click&nbsp;a button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/buzapps.net\/pages\/wp-content\/uploads\/2016\/12\/knowledgebase_background_button_color_01.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/buzapps.net\/pages\/wp-content\/uploads\/2016\/12\/knowledgebase_background_button_color_01.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>01)<\/strong><strong>&nbsp;<\/strong>Log into your <strong>App Manager<\/strong> and <strong>select your app<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>02)<\/strong><strong>&nbsp;<\/strong>Click&nbsp;<strong>Colors<\/strong>&nbsp;from the left-hand-side of the screen (or the middle of the screen).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>03)<\/strong>\u00a0Scroll down until you get to the <strong>Advanced\u00a0SCSS box<\/strong>\u00a0and paste the following code.\u00a0If there is already code in the advanced SCSS box, do not remove it.\u00a0Start a new line \u201cafter\u201d the last character in the box, then paste the code below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*** BEGIN: Add Hover Color To Buttons ***\/\n.button.button-custom:hover,\n.button.button-custom:active {\ncolor: #fff;\nbackground-color: #0099c7;\n}\n\/*** END: Add Hover Color To Buttons ***\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>IMPORTANT NOTE:<\/strong>&nbsp;If you apply this modification, all buttons in your app will be changed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a small snippet to add&nbsp;a&nbsp;background\/hover color&nbsp;when you click&nbsp;a button. 01)&nbsp;Log into your App Manager and select your app. 02)&nbsp;Click&nbsp;Colors&nbsp;from the left-hand-side of the screen (or the middle of the screen). 03)\u00a0Scroll down until you get to the Advanced\u00a0SCSS box\u00a0and paste the following code.\u00a0If there is already code in the advanced SCSS box, do not remove it.\u00a0Start a new line \u201cafter\u201d the last character in the box, then paste the code below. IMPORTANT NOTE:&nbsp;If you apply this modification, all buttons in your app will be changed.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[35],"class_list":["post-13339","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-how-to"],"_links":{"self":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/comments?post=13339"}],"version-history":[{"count":2,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13339\/revisions"}],"predecessor-version":[{"id":14146,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13339\/revisions\/14146"}],"wp:attachment":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/media?parent=13339"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase_cat?post=13339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}