{"id":9023,"date":"2023-05-02T11:56:10","date_gmt":"2023-05-02T16:56:10","guid":{"rendered":"https:\/\/www.eng.ufl.edu\/marcom\/?page_id=9023"},"modified":"2025-09-23T15:22:50","modified_gmt":"2025-09-23T20:22:50","slug":"button-styles","status":"publish","type":"page","link":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/","title":{"rendered":"Button Styles"},"content":{"rendered":"\n<p>If you are using the Mercury theme, you can make any <a href=\"https:\/\/wordpress.org\/documentation\/article\/buttons-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">standard WordPress button<\/a> into an animated button. <\/p>\n\n\n\n<p>In the Block Editor, insert a Buttons block. Enter text in the content area. Other options, including link destination and button styles, can be set in the editing toolbar. You can also add or remove styles in the inspector panel under Advanced > Additional CSS Classes.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1345\" height=\"769\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-buttonstyles.gif\" alt=\"\" class=\"wp-image-10827\"\/><\/figure>\n<\/div>\n\n\n<p><a href=\"https:\/\/github.com\/hwcoe\/hwcoe-ufl\/wiki\/Content-Tips-Tricks#buttons\" target=\"_blank\" rel=\"noreferrer noopener\">HWCOE 2019 college theme button styles and instructions<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are using the Mercury theme, you can make any standard WordPress button into an animated button. In the Block Editor, insert a Buttons block. Enter text in the content area. Other options, including link destination and button styles, can be set in the editing toolbar. You can also add or remove styles in [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":9989,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page-sidebar-none.php","meta":{"_acf_changed":false,"inline_featured_image":false,"featured_post":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9023","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Button Styles - Marketing &amp; Communications<\/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.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button Styles - Marketing &amp; Communications\" \/>\n<meta property=\"og:description\" content=\"If you are using the Mercury theme, you can make any standard WordPress button into an animated button. In the Block Editor, insert a Buttons block. Enter text in the content area. Other options, including link destination and button styles, can be set in the editing toolbar. You can also add or remove styles in [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Marketing &amp; Communications\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-23T20:22:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-buttonstyles.gif\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/\",\"url\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/\",\"name\":\"Button Styles - Marketing &amp; Communications\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom-dev\\\/wp-content\\\/uploads\\\/sites\\\/253\\\/2024\\\/02\\\/howto-buttonstyles.gif\",\"datePublished\":\"2023-05-02T16:56:10+00:00\",\"dateModified\":\"2025-09-23T20:22:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/wp-content\\\/uploads\\\/sites\\\/253\\\/2024\\\/02\\\/howto-buttonstyles.gif\",\"contentUrl\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/wp-content\\\/uploads\\\/sites\\\/253\\\/2024\\\/02\\\/howto-buttonstyles.gif\",\"width\":1345,\"height\":769},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/mercury\\\/button-styles\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Services &amp; Standards\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"WordPress Help and How-to\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Mercury\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Button Styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/#website\",\"url\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/\",\"name\":\"Marketing &amp; Communications\",\"description\":\"Herbert Wertheim College of Engineering\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Button Styles - Marketing &amp; Communications","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.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/","og_locale":"en_US","og_type":"article","og_title":"Button Styles - Marketing &amp; Communications","og_description":"If you are using the Mercury theme, you can make any standard WordPress button into an animated button. In the Block Editor, insert a Buttons block. Enter text in the content area. Other options, including link destination and button styles, can be set in the editing toolbar. You can also add or remove styles in [&hellip;]","og_url":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/","og_site_name":"Marketing &amp; Communications","article_modified_time":"2025-09-23T20:22:50+00:00","og_image":[{"url":"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-buttonstyles.gif","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/","url":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/","name":"Button Styles - Marketing &amp; Communications","isPartOf":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/#primaryimage"},"image":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-buttonstyles.gif","datePublished":"2023-05-02T16:56:10+00:00","dateModified":"2025-09-23T20:22:50+00:00","breadcrumb":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/#primaryimage","url":"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-buttonstyles.gif","contentUrl":"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-buttonstyles.gif","width":1345,"height":769},{"@type":"BreadcrumbList","@id":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/mercury\/button-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.eng.ufl.edu\/marcom\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/"},{"@type":"ListItem","position":3,"name":"Web Services &amp; Standards","item":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/"},{"@type":"ListItem","position":4,"name":"WordPress Help and How-to","item":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/"},{"@type":"ListItem","position":5,"name":"Mercury","item":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/"},{"@type":"ListItem","position":6,"name":"Button Styles"}]},{"@type":"WebSite","@id":"https:\/\/www.eng.ufl.edu\/marcom\/#website","url":"https:\/\/www.eng.ufl.edu\/marcom\/","name":"Marketing &amp; Communications","description":"Herbert Wertheim College of Engineering","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eng.ufl.edu\/marcom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/comments?post=9023"}],"version-history":[{"count":1,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9023\/revisions"}],"predecessor-version":[{"id":12025,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9023\/revisions\/12025"}],"up":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/pages\/9989"}],"wp:attachment":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/media?parent=9023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}