{"id":10345,"date":"2024-01-30T15:34:53","date_gmt":"2024-01-30T20:34:53","guid":{"rendered":"https:\/\/www.eng.ufl.edu\/marcom-dev\/?post_type=mercury-block&amp;p=10345"},"modified":"2024-01-30T15:34:53","modified_gmt":"2024-01-30T20:34:53","slug":"animated-border-button","status":"publish","type":"mercury-block","link":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/","title":{"rendered":"Animated Border Button"},"content":{"rendered":"\n<p>In the Block Editor, add a Buttons block. Select the button in the content area and add text. Edit the link, alignment, formatting, styles, and other settings for the buttons and button group in the editing toolbar. <\/p>\n\n\n\n<p><a href=\"https:\/\/webservices.it.ufl.edu\/mercury-theme\/items\/animated-border-button.html\" target=\"_blank\" rel=\"noreferrer noopener\">When to use and example of animated border buttons<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"427\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/01\/howto-animated-buttons.gif\" alt=\"Animation showing how to create animated buttons in the block editor\" class=\"wp-image-10445\"\/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Styled button with animation on focus.<\/p>\n","protected":false},"featured_media":10439,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"featured_post":"","_links_to":"","_links_to_target":""},"block-categories":[3],"class_list":["post-10345","mercury-block","type-mercury-block","status-publish","has-post-thumbnail","hentry","block-categories-buttons"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Animated Border Button - 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\/mercury-block\/animated-border-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Border Button - Marketing &amp; Communications\" \/>\n<meta property=\"og:description\" content=\"Styled button with animation on focus.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Marketing &amp; Communications\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/01\/animated-buttons.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"790\" \/>\n\t<meta property=\"og:image:height\" content=\"214\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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\\\/mercury-block\\\/animated-border-button\\\/\",\"url\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/\",\"name\":\"Animated Border Button - Marketing &amp; Communications\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/wp-content\\\/uploads\\\/sites\\\/253\\\/2024\\\/01\\\/animated-buttons.gif\",\"datePublished\":\"2024-01-30T20:34:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/wp-content\\\/uploads\\\/sites\\\/253\\\/2024\\\/01\\\/animated-buttons.gif\",\"contentUrl\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/wp-content\\\/uploads\\\/sites\\\/253\\\/2024\\\/01\\\/animated-buttons.gif\",\"width\":790,\"height\":214,\"caption\":\"Animated buttons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/mercury-block\\\/animated-border-button\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mercury Blocks How-tos\",\"item\":\"https:\\\/\\\/www.eng.ufl.edu\\\/marcom\\\/resources\\\/web-services-standards\\\/wordpress-help-and-how-to\\\/hwcoe-mercury-theme\\\/mercury-blocks\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Animated Border Button\"}]},{\"@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":"Animated Border Button - 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\/mercury-block\/animated-border-button\/","og_locale":"en_US","og_type":"article","og_title":"Animated Border Button - Marketing &amp; Communications","og_description":"Styled button with animation on focus.","og_url":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/","og_site_name":"Marketing &amp; Communications","og_image":[{"width":790,"height":214,"url":"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/01\/animated-buttons.gif","type":"image\/gif"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/","url":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/","name":"Animated Border Button - Marketing &amp; Communications","isPartOf":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/#primaryimage"},"image":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/#primaryimage"},"thumbnailUrl":"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/01\/animated-buttons.gif","datePublished":"2024-01-30T20:34:53+00:00","breadcrumb":{"@id":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/#primaryimage","url":"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/01\/animated-buttons.gif","contentUrl":"https:\/\/www.eng.ufl.edu\/marcom\/wp-content\/uploads\/sites\/253\/2024\/01\/animated-buttons.gif","width":790,"height":214,"caption":"Animated buttons"},{"@type":"BreadcrumbList","@id":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/animated-border-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.eng.ufl.edu\/marcom\/"},{"@type":"ListItem","position":2,"name":"Mercury Blocks How-tos","item":"https:\/\/www.eng.ufl.edu\/marcom\/resources\/web-services-standards\/wordpress-help-and-how-to\/hwcoe-mercury-theme\/mercury-blocks\/"},{"@type":"ListItem","position":3,"name":"Animated Border Button"}]},{"@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\/mercury-block\/10345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/mercury-block"}],"about":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/types\/mercury-block"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/media\/10439"}],"wp:attachment":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/media?parent=10345"}],"wp:term":[{"taxonomy":"block-categories","embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/block-categories?post=10345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}