{"id":8591,"date":"2017-02-11T11:51:21","date_gmt":"2017-02-11T11:51:21","guid":{"rendered":"https:\/\/themehunk.com\/?post_type=docs&#038;p=8591"},"modified":"2024-07-05T18:48:30","modified_gmt":"2024-07-05T13:18:30","slug":"how-to-add-button-styling-in-a-menu","status":"publish","type":"docs","link":"https:\/\/themehunk.com\/fr\/docs\/how-to-add-button-styling-in-a-menu\/","title":{"rendered":"How to Add Button styling in a menu"},"content":{"rendered":"<section class=\"wp-block-group adding-button has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">For adding buttons in Menus<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This tutorial is for adding the button in navigation. If you want a button in a menu navigation of your site and also want to give styling like background color, hover color, border etc to your button. Just follow the tutorial, you can do this by adding some simple custom CSS to it.<br>Just follow the instructions given below:-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First go to Appearance > Menus<\/li>\n\n\n\n<li>Create a menu name, select page and custom link to the menu. ( Page > Add new)<\/li>\n\n\n\n<li>Adding a class id for your page just select the CSS class option in menu structure item and save it.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"392\" height=\"263\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/2017-02-09_0401.png?resize=392%2C263&#038;ssl=1\" alt=\"2017-02-09_0401\" class=\"wp-image-8615\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/2017-02-09_0401.png?w=392&amp;ssl=1 392w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/2017-02-09_0401.png?resize=300%2C201&amp;ssl=1 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This will add a button to your site and you can also add a link to it.<\/li>\n\n\n\n<li>Now go to customize and add custom CSS by inspecting the menu item id follow this <a href=\"https:\/\/developer.chrome.com\/devtools\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">link<\/a><\/li>\n\n\n\n<li>Here are some examples for designing the button using Custom CSS.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"480\" height=\"96\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/orange_m-1.png?resize=480%2C96&#038;ssl=1\" alt=\"Button styling\" class=\"wp-image-8610\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/orange_m-1.png?w=480&amp;ssl=1 480w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/orange_m-1.png?resize=300%2C60&amp;ssl=1 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">.yourclass {\nborder:1px solid #ec7e01;\nbackground-color:\n#ec7e01;\nborder-radius:10px;\n}\n.yourclass a {\ncolor: #fff;\n}\n.yourclass:hover{\nbackground-color:\n#fec188;\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"488\" height=\"87\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/Blue_m.png?resize=488%2C87&#038;ssl=1\" alt=\"Button styling\" class=\"wp-image-8611\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/Blue_m.png?w=488&amp;ssl=1 488w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/Blue_m.png?resize=300%2C53&amp;ssl=1 300w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">.yourclass {\npadding: 0.2em 1em 0.2em 1em;\nborder-radius: 10px;\nbackground-color:\n#169cdd;\n}\n.yourclass a {\ncolor: #fff;\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"488\" height=\"97\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/grey_m.png?resize=488%2C97&#038;ssl=1\" alt=\"Button styling\" class=\"wp-image-8612\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/grey_m.png?w=488&amp;ssl=1 488w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/grey_m.png?resize=300%2C60&amp;ssl=1 300w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">.yourclass {\nborder:1px solid\n#4d4d4d ;\nbackground-color:#4d4d4d;\n}\n.yourclass a {\ncolor: #fff;\n}\n<\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"85\" src=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/red_m.png?resize=470%2C85&#038;ssl=1\" alt=\"Button styling\" class=\"wp-image-8613\" srcset=\"https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/red_m.png?w=470&amp;ssl=1 470w, https:\/\/i0.wp.com\/themehunk.com\/wp-content\/uploads\/2017\/02\/red_m.png?resize=300%2C54&amp;ssl=1 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">.yourclass {\nborder:1px solid #e92a20;\nbackground-color:#e92a20;\nborder-radius:5px;\n}\n.yourclass a {\ncolor:\n#fff;\n}\n.yourclass:hover{\nopacity:0.7;\nbackground-color:#f35148;\nborder:1px solid #f35148;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hope this will help you. For more information you can contact our support team at <a href=\"https:\/\/themehunk.com\/fr\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\">support forum<\/a>.<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>For adding buttons in Menus This tutorial is for adding the button in navigation. If you want a button in a menu navigation of your site and also want to give styling like background color, hover color, border etc to your button. Just follow the tutorial, you can do this by adding some simple custom [&hellip;]<\/p>\n","protected":false},"author":7288,"featured_media":0,"template":"","meta":{"footnotes":""},"class_list":["post-8591","docs","type-docs","status-publish","hentry","docscate-custom-code","docstag-customcss","docstag-menu-navigation","docstag-website","docstag-wordpress"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/docs\/8591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/users\/7288"}],"version-history":[{"count":1,"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/docs\/8591\/revisions"}],"predecessor-version":[{"id":69424,"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/docs\/8591\/revisions\/69424"}],"wp:attachment":[{"href":"https:\/\/themehunk.com\/fr\/wp-json\/wp\/v2\/media?parent=8591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}