{"id":336,"date":"2024-12-28T23:33:00","date_gmt":"2024-12-28T21:33:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=336"},"modified":"2025-01-15T10:27:36","modified_gmt":"2025-01-15T08:27:36","slug":"gradient-background-buttons-css-html","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/","title":{"rendered":"Gradient background button with HTML and CSS"},"content":{"rendered":"

Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo and see the focus position of the background travelling from one side to the other.<\/p>\n

Button 1<\/a>
\n
\nButton 2<\/a>
\nButton 3<\/a>
\nButton 4<\/a><\/p>\n

The HTML code<\/h2>\n

We set four links with a common gradient button class and assign a unique class with the color style.<\/p>\n

<a<\/span> class<\/span>=\"gradient-button gradient-button-1\"<\/span>><\/span>Button 1<\/a<\/span>><\/span><br<\/span> \/><\/span>\n<a<\/span> class<\/span>=\"gradient-button gradient-button-2\"<\/span>><\/span>Button 2<\/a<\/span>><\/span><br<\/span> \/><\/span>\n<a<\/span> class<\/span>=\"gradient-button gradient-button-3\"<\/span>><\/span>Button 3<\/a<\/span>><\/span><br<\/span> \/><\/span>\n<a<\/span> class<\/span>=\"gradient-button gradient-button-4\"<\/span>><\/span>Button 4<\/a<\/span>><\/span>\n<\/pre>\n
The CSS code<\/h2>\n
You can adjust the style sheet below according to your needs, changing the margins, padding and font size. Use the online gradient generator<\/a> to set up buttons with your own color scheme<\/a>.<\/p>\n
.gradient-button<\/span> {\n    margin<\/span>: 10px<\/span><\/span>;\n    font-family<\/span>: \"Arial Black\"<\/span>, Gadget, sans-serif<\/span>;\n    font-size<\/span>: 20px<\/span><\/span>;\n    padding<\/span>: 15px<\/span><\/span>;\n    text-align<\/span>: center<\/span>;\n    text-transform<\/span>: uppercase<\/span>;\n    transition: 0.5s<\/span><\/span>;\n    background<\/span>-size<\/span>: 200%<\/span><\/span> auto<\/span>;\n    color<\/span>: #FFF<\/span>;\n    box-shadow<\/span>: 0<\/span> 0<\/span> 20px<\/span><\/span> #eee<\/span>;\n    border-radius<\/span>: 10px<\/span><\/span>;\n    width<\/span>: 200px<\/span><\/span>;\n    box-shadow<\/span>: 0<\/span> 1px<\/span><\/span> 3px<\/span><\/span> rgba<\/span>(0,0,0,0.12<\/span>), 0<\/span> 1px<\/span><\/span> 2px<\/span><\/span> rgba<\/span>(0,0,0,0.24<\/span>);\n    transition: all<\/span> 0.3s<\/span><\/span> cubic-bezier(.25<\/span>,.8<\/span>,.25<\/span>,1<\/span>);\n    cursor<\/span>: pointer<\/span>;\n    display<\/span>: inline-block<\/span>;\n    border-radius<\/span>: 25px<\/span><\/span>;\n}\n.gradient-button<\/span>:hover<\/span>{\n    box-shadow<\/span>: 0<\/span> 10px<\/span><\/span> 20px<\/span><\/span> rgba<\/span>(0,0,0,0.19<\/span>), 0<\/span> 6px<\/span><\/span> 6px<\/span><\/span> rgba<\/span>(0,0,0,0.23<\/span>);\n    margin<\/span>: 8px<\/span><\/span> 10px<\/span><\/span> 12px<\/span><\/span>;\n}\n.gradient-button-1<\/span> {background-image<\/span>: linear-gradient(to right<\/span>, #DD5E89<\/span> 0%<\/span><\/span>, #F7BB97<\/span> 51%<\/span><\/span>, #DD5E89<\/span> 100%<\/span><\/span>)}\n.gradient-button-1<\/span>:hover<\/span> { background-position<\/span>: right<\/span> center<\/span>; }\n\n.gradient-button-2<\/span> {background-image<\/span>: linear-gradient(to right<\/span>, #2BC0E4<\/span> 0%<\/span><\/span>, #EAECC6<\/span> 51%<\/span><\/span>, #2BC0E4<\/span> 100%<\/span><\/span>)}\n.gradient-button-2<\/span>:hover<\/span> { background-position<\/span>: right<\/span> center<\/span>; }\n\n.gradient-button-3<\/span> {background-image<\/span>: linear-gradient(to right<\/span>, #7474BF<\/span> 0%<\/span><\/span>, #348AC7<\/span> 51%<\/span><\/span>, #7474BF<\/span> 100%<\/span><\/span>)}\n.gradient-button-3<\/span>:hover<\/span> { background-position<\/span>: right<\/span> center<\/span>; }\n\n.gradient-button-4<\/span> {background-image<\/span>: linear-gradient(to right<\/span>, #00d2ff<\/span> 0%<\/span><\/span>, #3a7bd5<\/span> 51%<\/span><\/span>, #00d2ff<\/span> 100%<\/span><\/span>)}\n.gradient-button-4<\/span>:hover<\/span> { background-position<\/span>: right<\/span> center<\/span>; }\n<\/pre>\n
And finally a screenshot image with the buttons for those who use outdated web browsers which don’t support CSS3 but still want to see how these gradient buttons look like:<\/p>\n
\"gradient<\/p>\n
Useful tip<\/h2>\n
The CSS Cheat Sheet has its own button generator<\/a> where you can set up the styles of your button in an interactive interface.<\/p>\n
Look for the panel pictured below to adjust color, size, padding, radius and change the remaining features like gradient, shadows, font and border int other panels:<\/p>\n
\"css<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo and see the focus position of the background travelling from one side to the other. Button 1<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,3,4],"tags":[],"class_list":["post-336","post","type-post","status-publish","format-standard","hentry","category-articles","category-css","category-freebies","category-html"],"yoast_head":"\nGradient background buttons with HTML and CSS<\/title>\n<meta name=\"description\" content=\"Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gradient background buttons with HTML and CSS\" \/>\n<meta property=\"og:description\" content=\"Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-28T21:33:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-15T08:27:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Gradient background button with HTML and CSS\",\"datePublished\":\"2024-12-28T21:33:00+00:00\",\"dateModified\":\"2025-01-15T08:27:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\"},\"wordCount\":183,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg\",\"articleSection\":[\"Articles\",\"CSS\",\"Freebies\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\",\"url\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\",\"name\":\"Gradient background buttons with HTML and CSS\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg\",\"datePublished\":\"2024-12-28T21:33:00+00:00\",\"dateModified\":\"2025-01-15T08:27:36+00:00\",\"description\":\"Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo!\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg\",\"width\":267,\"height\":316,\"caption\":\"gradient background buttons hover\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gradient background button with HTML and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gradient background buttons with HTML and CSS","description":"Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo!","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:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/","og_locale":"en_GB","og_type":"article","og_title":"Gradient background buttons with HTML and CSS","og_description":"Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo!","og_url":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2024-12-28T21:33:00+00:00","article_modified_time":"2025-01-15T08:27:36+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Gradient background button with HTML and CSS","datePublished":"2024-12-28T21:33:00+00:00","dateModified":"2025-01-15T08:27:36+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/"},"wordCount":183,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg","articleSection":["Articles","CSS","Freebies","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/","url":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/","name":"Gradient background buttons with HTML and CSS","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg","datePublished":"2024-12-28T21:33:00+00:00","dateModified":"2025-01-15T08:27:36+00:00","description":"Gradient background buttons with animated hover transition effect implemented with HTML5 and CSS3. Try the onpage demo!","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/09\/gradient-background-buttons-css-html.jpg","width":267,"height":316,"caption":"gradient background buttons hover"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/gradient-background-buttons-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Gradient background button with HTML and CSS"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/336\/revisions"}],"predecessor-version":[{"id":1157,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/336\/revisions\/1157"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}