{"id":9719,"date":"2017-06-26T11:00:11","date_gmt":"2017-06-26T10:00:11","guid":{"rendered":"https:\/\/www.awardspace.com\/?page_id=9719"},"modified":"2024-02-27T12:52:28","modified_gmt":"2024-02-27T12:52:28","slug":"create-button-wordpress","status":"publish","type":"post","link":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/","title":{"rendered":"How to Create a Button in WordPress With a Plugin"},"content":{"rendered":"<p>If you are anything like me, then you just adore a sharp and minimal web design. Trying to accommodate that preference into your WordPress website can turn out to be the bane of your life. Don\u2018t panic! I\u2018m here to help!<\/p>\n<p>A huge part of your website\u2018s vision is the buttons included in the design. Even though they might seem like something insignificant in the big picture, they are actually one of the main graphic elements on the web. That\u2018s why they can turn your whole website\u2018s style upside down if done wrong.<\/p>\n<p>The general way to create a button in WordPress is with shortcodes. I\u2018m not going to lie \u2013 it\u2018s time-consuming and annoying. There is, however, an easier solution \u2013 plugins. I\u2018ve tried a couple of plugins while trying to design my own buttons, but there was one that stood out \u2013 <a href=\"https:\/\/wordpress.org\/plugins\/buttons-x\/\">Button X.<\/a><\/p>\n<p>Button X is an incredibly user-friendly plugin that provides easy and clean button designs that are extremely customizable. Here comes the best part: you can generally adjust every single detail of each button, thus making them as close to your personal style as possible.\u00a0 Let\u2018s follow the creative process in the next 5 steps!<\/p>\n<p><strong>1. Download and activate the plugin. <\/strong>Here I assume that you\u2018ve already gone through the <a href=\"\/wordpress-tutorials\/add-plugin-wordpress\/\">How to Add a Plugin<\/a> tutorial and are aware of the steps to take when adding a plugin.<\/p>\n<p><strong>2. Go to Buttons. <\/strong>The Button X plugin will create a page in your Admin Panel. Hover over it and a dropdown menu will appear. Choose <strong>Buttons<\/strong>.<strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9671\" src=\"\/wp-content\/uploads\/2017\/06\/Button-X-Buttons.png\" alt=\"Buttons\" width=\"563\" height=\"407\" \/><\/strong><\/p>\n<p><strong>3.\u00a0<\/strong><strong>Add a new button. <\/strong>By clicking <strong><em>Add New<\/em><\/strong> you start creating your first button. You can name it and browse through the options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9670\" src=\"\/wp-content\/uploads\/2017\/06\/Add-a-New-Button.png\" alt=\"Add a Button\" width=\"874\" height=\"360\" \/><\/p>\n<p><strong>4. Design your button. <\/strong>At this point , you\u2019ve already seen the full options which you can adjust for your button. Go through them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9673\" src=\"\/wp-content\/uploads\/2017\/06\/Design-Your-Button.png\" alt=\"Design a Button\" width=\"777\" height=\"372\" \/><\/p>\n<ul>\n<li><strong>Link \u2013 <\/strong>First, choose the type of the link \u2013 pick the URL. Decide whether you want your button to send the users to a new window, or not. Finally, paste the link.<\/li>\n<li><strong>Primary Text \u2013 <\/strong>Type in the text that will show on your button. You can choose the font and the color of the text.<\/li>\n<li><strong>Background and Border \u2013 <\/strong>You can choose a color for both or leave one of them transparent. It\u2019s a good idea to choose a different <strong><em>hover<\/em><\/strong> option as it will help the button stand out.<\/li>\n<li><strong>Layout \u2013 <\/strong>Choose the style and the shape.<\/li>\n<\/ul>\n<p><strong>5. Insert the button in a post or page.\u00a0<\/strong>After you\u2019ve designed your dream button, it\u2019s time to copy the <strong><em>Short Code<\/em><\/strong>. This is the code that appears right above <strong><em>Publish<\/em><\/strong> on the right side of the page. After copying it, click <strong><em>Publish<\/em><\/strong> and move to the post or page where you want to include it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9672 size-full\" src=\"\/wp-content\/uploads\/2017\/06\/Copy-the-Short-Code.png\" alt=\"Copy the Short Code\" width=\"297\" height=\"381\" \/><\/p>\n<p>Now paste the <em><strong>Short Code<\/strong><\/em> in the <em><strong>Text Editor<\/strong><\/em> and watch the magic happen!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9674\" src=\"\/wp-content\/uploads\/2017\/06\/Paste-the-Short-Code.png\" alt=\"\" width=\"1427\" height=\"516\" \/><\/p>\n<p>Click <em><strong>Preview<\/strong> <\/em>and voil\u00e0! Your very own button is ready!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9675 alignnone\" src=\"\/wp-content\/uploads\/2017\/06\/New-button.png\" alt=\"New Button\" width=\"219\" height=\"69\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are anything like me, then you just adore a sharp and minimal web design. Trying to accommodate that preference into your WordPress website can turn out to be the bane of your life. Don\u2018t panic! I\u2018m here to help! A huge part of your website\u2018s vision is the buttons included in the design. [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":30486,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[85],"tags":[],"class_list":["post-9719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customization"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Button in WordPress With a Plugin | Wordpress Tutorials<\/title>\n<meta name=\"description\" content=\"The buttons are one of the main graphic elements in your website and they take a huge part in its design. Learn how to create a button in WordPress now!\" \/>\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.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Button in WordPress With a Plugin | Wordpress Tutorials\" \/>\n<meta property=\"og:description\" content=\"The buttons are one of the main graphic elements in your website and they take a huge part in its design. Learn how to create a button in WordPress now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"AwardSpace.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AwardSpace\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-26T10:00:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-27T12:52:28+00:00\" \/>\n<meta name=\"author\" content=\"Editorial Staff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@awspace\" \/>\n<meta name=\"twitter:site\" content=\"@awspace\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Editorial Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\"},\"author\":{\"name\":\"Editorial Staff\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/05aca32042a18648799bc9e50ceaa72b\"},\"headline\":\"How to Create a Button in WordPress With a Plugin\",\"datePublished\":\"2017-06-26T10:00:11+00:00\",\"dateModified\":\"2024-02-27T12:52:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\"},\"wordCount\":497,\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Customization\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\",\"url\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\",\"name\":\"How to Create a Button in WordPress With a Plugin | Wordpress Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2017-06-26T10:00:11+00:00\",\"dateModified\":\"2024-02-27T12:52:28+00:00\",\"description\":\"The buttons are one of the main graphic elements in your website and they take a huge part in its design. Learn how to create a button in WordPress now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.awardspace.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Tutorials\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Customization\",\"item\":\"https:\/\/www.awardspace.com\/wordpress-tutorials\/customization\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Create a Button in WordPress With a Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.awardspace.com\/#website\",\"url\":\"https:\/\/www.awardspace.com\/\",\"name\":\"AwardSpace.com\",\"description\":\"Free Web Hosting with PHP, MySQL, Email Sending, No Ads\",\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.awardspace.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.awardspace.com\/#organization\",\"name\":\"AwardSpace.com\",\"url\":\"https:\/\/www.awardspace.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"contentUrl\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"width\":1759,\"height\":176,\"caption\":\"AwardSpace.com\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/AwardSpace\/\",\"https:\/\/x.com\/awspace\",\"https:\/\/www.instagram.com\/awardspace\/\",\"https:\/\/www.quora.com\/profile\/Award-Space\",\"https:\/\/www.linkedin.com\/company\/19214384\/\",\"https:\/\/www.reddit.com\/user\/AwardSpace\",\"https:\/\/www.pinterest.com\/awardspace\/\",\"https:\/\/www.youtube.com\/user\/AwardspaceWebHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/05aca32042a18648799bc9e50ceaa72b\",\"name\":\"Editorial Staff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38a8d1478f26d215913dfb802ea7556f753f28ab41b821750930711476f2cb6a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38a8d1478f26d215913dfb802ea7556f753f28ab41b821750930711476f2cb6a?s=96&d=mm&r=g\",\"caption\":\"Editorial Staff\"},\"url\":\"https:\/\/www.awardspace.com\/author\/editorial-staff\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Button in WordPress With a Plugin | Wordpress Tutorials","description":"The buttons are one of the main graphic elements in your website and they take a huge part in its design. Learn how to create a button in WordPress now!","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.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Button in WordPress With a Plugin | Wordpress Tutorials","og_description":"The buttons are one of the main graphic elements in your website and they take a huge part in its design. Learn how to create a button in WordPress now!","og_url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/","og_site_name":"AwardSpace.com","article_publisher":"https:\/\/www.facebook.com\/AwardSpace\/","article_published_time":"2017-06-26T10:00:11+00:00","article_modified_time":"2024-02-27T12:52:28+00:00","author":"Editorial Staff","twitter_card":"summary_large_image","twitter_creator":"@awspace","twitter_site":"@awspace","twitter_misc":{"Written by":"Editorial Staff","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/"},"author":{"name":"Editorial Staff","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/05aca32042a18648799bc9e50ceaa72b"},"headline":"How to Create a Button in WordPress With a Plugin","datePublished":"2017-06-26T10:00:11+00:00","dateModified":"2024-02-27T12:52:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/"},"wordCount":497,"publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage"},"thumbnailUrl":"","articleSection":["Customization"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/","url":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/","name":"How to Create a Button in WordPress With a Plugin | Wordpress Tutorials","isPartOf":{"@id":"https:\/\/www.awardspace.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage"},"thumbnailUrl":"","datePublished":"2017-06-26T10:00:11+00:00","dateModified":"2024-02-27T12:52:28+00:00","description":"The buttons are one of the main graphic elements in your website and they take a huge part in its design. Learn how to create a button in WordPress now!","breadcrumb":{"@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.awardspace.com\/wordpress-tutorials\/create-button-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.awardspace.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Tutorials","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/"},{"@type":"ListItem","position":3,"name":"Customization","item":"https:\/\/www.awardspace.com\/wordpress-tutorials\/customization\/"},{"@type":"ListItem","position":4,"name":"How to Create a Button in WordPress With a Plugin"}]},{"@type":"WebSite","@id":"https:\/\/www.awardspace.com\/#website","url":"https:\/\/www.awardspace.com\/","name":"AwardSpace.com","description":"Free Web Hosting with PHP, MySQL, Email Sending, No Ads","publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.awardspace.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.awardspace.com\/#organization","name":"AwardSpace.com","url":"https:\/\/www.awardspace.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","contentUrl":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","width":1759,"height":176,"caption":"AwardSpace.com"},"image":{"@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/AwardSpace\/","https:\/\/x.com\/awspace","https:\/\/www.instagram.com\/awardspace\/","https:\/\/www.quora.com\/profile\/Award-Space","https:\/\/www.linkedin.com\/company\/19214384\/","https:\/\/www.reddit.com\/user\/AwardSpace","https:\/\/www.pinterest.com\/awardspace\/","https:\/\/www.youtube.com\/user\/AwardspaceWebHosting"]},{"@type":"Person","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/05aca32042a18648799bc9e50ceaa72b","name":"Editorial Staff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38a8d1478f26d215913dfb802ea7556f753f28ab41b821750930711476f2cb6a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38a8d1478f26d215913dfb802ea7556f753f28ab41b821750930711476f2cb6a?s=96&d=mm&r=g","caption":"Editorial Staff"},"url":"https:\/\/www.awardspace.com\/author\/editorial-staff\/"}]}},"_links":{"self":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/9719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/comments?post=9719"}],"version-history":[{"count":0,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/9719\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/media?parent=9719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/categories?post=9719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/tags?post=9719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}