{"id":691,"date":"2017-05-01T18:23:09","date_gmt":"2017-05-02T01:23:09","guid":{"rendered":"https:\/\/www.blocksylaunch.click\/documentation\/?p=691"},"modified":"2017-12-15T12:41:20","modified_gmt":"2017-12-15T19:41:20","slug":"customizer-buttons","status":"publish","type":"post","link":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/","title":{"rendered":"Adjusting Divi Button Styles In The Theme Customizer"},"content":{"rendered":"<p><iframe loading=\"lazy\" class=\"youtube-player\" type=\"text\/html\"  width=\"920\" height=\"518\" src=\"https:\/\/www.youtube.com\/embed\/G5XxrimT5cw?feature=oembed\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h2>Divi&#8217;s Buttons Are Infinitely Customizable<\/h2>\n<p>We have decked out the Theme Customizer with every button customization option you could ever need. Using these customizer controls, you can create truly unique and stunning buttons for your website.To begin customizing your website&#8217;s buttons, you must first enter the Theme Customizer by clicking the <strong>Divi > Theme Customizer<\/strong> link within your WordPress Dashboard. Next click the &#8220;Buttons&#8221; panel to reveal the button settings. The button settings are separated into two sections: Buttons Styles and Button Hover Styles.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg\" alt=\"docs image\" \/><\/p>\n<h2>Button Style<\/h2>\n<p>Here you can adjust the general appearance of your buttons using the various customizer controls. You can change the color of your button text &#038; background, adjust the button font size and style, and even create rounded buttons using the border-radius slider. In addition, you can change the default font and icon used within the buttons.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-2.jpg\" alt=\"docs image\" \/><\/p>\n<h2>Button Hover Style<\/h2>\n<p>You can adjust the button&#8217;s hover style as well. When you make a hover style different from the normal button style, the effect will be transitioned during hover, creating a pleasing animation. This animation is triggered when the visitors hovers over the button with their mouse.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-3.jpg\" alt=\"docs image\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Change the look and feel of your buttons to give your site a unique look.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,2],"tags":[],"class_list":["post-691","post","type-post","status-publish","format-standard","hentry","category-customize","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adjusting Divi Button Styles In The Theme Customizer - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Change the look and feel of your buttons to give your site a unique look.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-02T01:23:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-15T19:41:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg\" \/>\n<meta name=\"author\" content=\"admindocumentation\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admindocumentation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/\"},\"author\":{\"name\":\"admindocumentation\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"headline\":\"Adjusting Divi Button Styles In The Theme Customizer\",\"datePublished\":\"2017-05-02T01:23:09+00:00\",\"dateModified\":\"2017-12-15T19:41:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/\"},\"wordCount\":207,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/customizer-buttons-image-1.jpg\",\"articleSection\":[\"Customizing Divi\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/\",\"name\":\"Adjusting Divi Button Styles In The Theme Customizer - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/customizer-buttons-image-1.jpg\",\"datePublished\":\"2017-05-02T01:23:09+00:00\",\"dateModified\":\"2017-12-15T19:41:20+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/customizer-buttons-image-1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/customizer-buttons-image-1.jpg\",\"width\":960,\"height\":597},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/customizer-buttons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adjusting Divi Button Styles In The Theme Customizer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\",\"name\":\"admindocumentation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"caption\":\"admindocumentation\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/","og_locale":"en_US","og_type":"article","og_title":"Adjusting Divi Button Styles In The Theme Customizer - Elegant Themes Documentation","og_description":"Change the look and feel of your buttons to give your site a unique look.","og_url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2017-05-02T01:23:09+00:00","article_modified_time":"2017-12-15T19:41:20+00:00","og_image":[{"url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg","type":"","width":"","height":""}],"author":"admindocumentation","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admindocumentation","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#article","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/"},"author":{"name":"admindocumentation","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"headline":"Adjusting Divi Button Styles In The Theme Customizer","datePublished":"2017-05-02T01:23:09+00:00","dateModified":"2017-12-15T19:41:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/"},"wordCount":207,"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg","articleSection":["Customizing Divi","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/","url":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/","name":"Adjusting Divi Button Styles In The Theme Customizer - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#primaryimage"},"image":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg","datePublished":"2017-05-02T01:23:09+00:00","dateModified":"2017-12-15T19:41:20+00:00","author":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"breadcrumb":{"@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#primaryimage","url":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg","contentUrl":"https:\/\/www.blocksylaunch.click\/documentation\/wp-content\/uploads\/2017\/05\/customizer-buttons-image-1.jpg","width":960,"height":597},{"@type":"BreadcrumbList","@id":"https:\/\/www.blocksylaunch.click\/documentation\/divi\/customizer-buttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"Adjusting Divi Button Styles In The Theme Customizer"}]},{"@type":"WebSite","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#website","url":"https:\/\/www.blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268","name":"admindocumentation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","caption":"admindocumentation"}}]}},"_links":{"self":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":3,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"predecessor-version":[{"id":2369,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/691\/revisions\/2369"}],"wp:attachment":[{"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}