{"id":297030,"date":"2020-02-14T08:24:51","date_gmt":"2020-02-14T15:24:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=297030"},"modified":"2022-02-22T06:54:11","modified_gmt":"2022-02-22T14:54:11","slug":"a-complete-guide-to-links-and-buttons","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-complete-guide-to-links-and-buttons\/","title":{"rendered":"A Complete Guide to Links and Buttons"},"content":{"rendered":"\n<div class=\"wp-block-group button-guide-intro\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-normal-font-size\">There is a lot to know about links and buttons in HTML. There is markup implementation and related attributes, styling best practices, things to avoid, and the even-more-nuanced cousins of the link: buttons and button-like inputs.<\/p>\n\n\n\n<p>Let&#8217;s take a look at the whole world of links and buttons, and all the considerations at the HTML, CSS, JavaScript, design, and accessibility layers that come with them. There are plenty of pitfalls and bad practices to avoid along the way. By covering it, we\u2019ll have a complete good UX implementation of both elements.<\/p>\n<\/div><\/div>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-group explanation\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Quick <strong>guidelines<\/strong> on when to use each:<\/p>\n\n\n\n<ul><li>Are you giving a user a way to go to another page or a different part of the same page? Use a <strong>link<\/strong> (<code>&lt;a href=\"\/somewhere\"&gt;link&lt;\/a&gt;<\/code>)<\/li><li>Are you making a JavaScript-powered clickable action? Use a <strong>button<\/strong> (<code>&lt;button type=\"button\"&gt;button&lt;\/button&gt;<\/code>)<\/li><li>Are you submitting a form? Use a <strong>submit input<\/strong> (<code>&lt;input type=\"submit\" value=\"Submit\"&gt;<\/code>)<\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"two-column-guide\">\n<div class=\"two-column-guide-left\">\n\n\n<h2 class=\"wp-block-heading\" id=\"links\">Links<\/h2>\n\n\n<p>Links are one of the most basic, yet deeply fundamental and foundational building blocks of the web. Click a link, and you move to another page or are moved to another place within the same page.<\/p>\n\n\n\n<details>\n  <summary><strong>Table of Contents<\/strong><\/summary>\n\n\n\n<ul><li><a href=\"#links-heading-1\">HTML implementation<\/a><\/li><li><a href=\"#links-heading-2\">Styling and CSS considerations<\/a><\/li><li><a href=\"#links-heading-3\">JavaScript considerations<\/a><\/li><li><a href=\"#links-heading-4\">Accessibility considerations<\/a><\/li><\/ul>\n\n\n\n<\/details>\n\n\n<h3 class=\"wp-block-heading\" id=\"links-heading-1\">HTML implementation<\/h3>\n\n<h4 class=\"wp-block-heading\" id=\"a-basic-link\">A basic link<\/h4>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"https:\/\/css-tricks.com\">CSS-Tricks&lt;\/a><\/code><\/pre>\n\n\n\n<p>That&#8217;s a link to a &#8220;fully qualified&#8221; or &#8220;absolute&#8221; URL.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"a-relative-link\">A relative link<\/h4>\n\n\n<p>You can link &#8220;relatively&#8221; as well:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- Useful in navigation, but be careful in content that may travel elsewhere (e.g. RSS) -->\n&lt;a href=\"\/pages\/about.html\">About&lt;\/a><\/code><\/pre>\n\n\n\n<p>That can be useful, for example, in development where the domain name is likely to be different than the production site, but you still want to be able to click links. Relative URLs are most useful for things like navigation, but be careful of using them within content \u2014 like blog posts \u2014 where that content may be read off-site, like in an app or RSS feed.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"jump-link\">A jump link<\/h4>\n\n\n<p>Links can also be &#8220;hash links&#8221; or &#8220;jump links&#8221; by starting with a <code>#<\/code>:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"#section-2\">Section Two&lt;\/a>\n&lt;!-- will jump to... -->\n&lt;section id=\"section-2\">&lt;\/section><\/code><\/pre>\n\n\n\n<p>Clicking that link will &#8220;jump&#8221; (scroll) to the first element in the DOM with an ID that matches, like the section element above.<\/p>\n\n\n\n<p class=\"explanation\">&#x1f4a5; <strong>Little trick:<\/strong> Using a hash link (e.g. <code>#0<\/code>) in development can be useful so you can click the link without being sent back to the top of the page like a click on a <code>#<\/code> link does. But careful, links that don&#8217;t link anywhere should never make it to production.<\/p>\n\n\n\n<p class=\"explanation\">&#x1f4a5; <strong>Little trick:<\/strong> Jump-links can sometimes benefit from <a href=\"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/\">smooth scrolling<\/a> to help people understand that the page is moving from one place to another.<\/p>\n\n\n\n<p>It&#8217;s a fairly common UI\/UX thing to see a &#8220;Back to top&#8221; link on sites, particularly where important navigational controls are at the top but there is quite a bit of content to scroll (or otherwise navigate) through. To create a jump link, link to the ID of an element that is at the top of the page where it makes sense to send focus back to.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"#top-of-page\">Back to Top&lt;\/a><\/code><\/pre>\n\n\n\n<p>Jump links are sometimes also used to link to other anchor (<code>&lt;a&gt;<\/code>) elements that have no <code>href<\/code> attribute. Those are called &#8220;placeholder&#8221; links:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a id=\"section-2\">&lt;\/a>\n&lt;h3>Section 2&lt;\/h3><\/code><\/pre>\n\n\n\n<p>There are <a href=\"https:\/\/www.scottohara.me\/note\/2019\/07\/17\/placeholder-link.html\" rel=\"noopener\">accessibility considerations<\/a> of these, but overall they are acceptable. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"disabled-links\">Disabled links<\/h4>\n\n\n<p>A link without an <code>href<\/code> attribute is the only <a href=\"https:\/\/css-tricks.com\/how-to-disable-links\/\">practical way<\/a> to disable a link. Why disable a link? Perhaps it&#8217;s a link that only becomes active after logging in or signing up.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:not([href]) {\n  \/* style a \"disabled\" link *\/\n}<\/code><\/pre>\n\n\n\n<p>When a link has no <code>href<\/code>, it has no role, no focusability, and no keyboard events. <a href=\"https:\/\/www.scottohara.me\/note\/2019\/07\/17\/placeholder-link.html\" rel=\"noopener\">This is intentional<\/a>. You could think of it like a <code>&lt;span&gt;<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"do-you-need-the-link-to-open-in-a-new-window-or-tab\">Do you need the link to open in a new window or tab?<\/h4>\n\n\n<p>You can use the <code>target<\/code> attribute for that, but it is <a href=\"https:\/\/adrianroselli.com\/2020\/02\/link-targets-and-3-2-5.html\" rel=\"noopener\">strongly discouraged<\/a>. <\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"https:\/\/css-tricks.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n  CSS-Tricks\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>The bit that makes it work is <code>target=\"_blank\"<\/code>, but note the extra <code>rel<\/code> attribute and values there which <a href=\"https:\/\/mathiasbynens.github.io\/rel-noopener\/\" rel=\"noopener\">make it safer<\/a> and <a href=\"https:\/\/jakearchibald.com\/2016\/performance-benefits-of-rel-noopener\/\" rel=\"noopener\">faster<\/a>.<\/p>\n\n\n\n<p>Making links open in new tabs is a major UX discussion. We have <a href=\"https:\/\/css-tricks.com\/use-target_blank\/\">a whole article about when to use it here<\/a>. Summarized:<\/p>\n\n\n\n<p>Don&#8217;t use it:<\/p>\n\n\n\n<ul><li>Because you or your client prefer it personally.<\/li><li>Because you&#8217;re trying to beef up your time on site metric.<\/li><li>Because you&#8217;re distinguishing between internal and external links or content types.<\/li><li>Because it&#8217;s your way out of dealing with infinite scroll trickiness.<\/li><\/ul>\n\n\n\n<p>Do use it:<\/p>\n\n\n\n<ul><li>Because a user is doing something on the current page, like actively playing media or has unsaved work.<\/li><li>You have some obscure technical reason where you are forced to (even then you&#8217;re still probably the rule, not the exception).<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"need-the-link-to-trigger-a-download\">Need the link to trigger a download?<\/h4>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/building-good-download-button\/\">The <code>download<\/code> attribute<\/a> on a link will instruct the browser to download the linked file rather than opening it within the current page\/tab. It&#8217;s a nice UX touch.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"language-markup\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">&lt;a href=\"\/files\/file.pdf\" download>Download PDF&lt;\/a><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-rel-attribute\">The <code>rel<\/code> attribute<\/h4>\n\n\n<p>This attribute is for the relationship of the link to the target.<\/p>\n\n\n\n<p>The <code>rel<\/code> attribute is also commonly used on the <code>&lt;link&gt;<\/code> element (which is not used for creating hyperlinks, but for things like including CSS and preloading). We&#8217;re not including <code>rel<\/code> values for the <code>&lt;link&gt;<\/code> element here, just anchor links.<\/p>\n\n\n\n<p>Here are some basic examples:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/page\/3\" rel=\"next\">Next&lt;\/a>\n&lt;a href=\"\/page\/1\" rel=\"prev\">Previous&lt;\/a>\n\n&lt;a href=\"http:\/\/creativecommons.org\/licenses\/by\/2.0\/\" rel=\"license\">cc by 2.0&lt;\/a>\n\n&lt;a href=\"\/topics\/\" rel=\"directory\">All Topics&lt;\/a><\/code><\/pre>\n\n\n\n<ul><li><code>rel=\"alternate\"<\/code>: Alternate version of the document.<\/li><li><code>rel=\"author\"<\/code>: Author of the document.<\/li><li><code>rel=\"help\"<\/code>: A resource for help with the document.<\/li><li><code>rel=\"license\"<\/code>: License and legal information.<\/li><li><code>rel=\"manifest\"<\/code>: Web App Manifest document.<\/li><li><code>rel=\"next\"<\/code>: Next document in the series.<\/li><li><code>rel=\"prev\"<\/code>: Previous document in the series.<\/li><li><code>rel=\"search\"<\/code>: A document meant to perform a search in the current document.<\/li><\/ul>\n\n\n\n<p>There are also some <code>rel<\/code> attributes specifically to <a href=\"https:\/\/support.google.com\/webmasters\/answer\/96569?hl=en\" rel=\"noopener\">inform search engines<\/a>:<\/p>\n\n\n\n<ul><li><code>rel=\"sponsored\"<\/code>: Mark links that are advertisements or paid placements (commonly called paid links) as sponsored.<\/li><li><code>rel=\"ugc\"<\/code>: For not-particularly-trusted user-generated content, like comments and forum posts.<\/li><li><code>rel=\"nofollow\"<\/code>: Tell the search engine to ignore this and not associate this site with where this links to.<\/li><\/ul>\n\n\n\n<p>And also some <code>rel<\/code> attributes that are most security-focused:<\/p>\n\n\n\n<ul><li><code>rel=\"noopener\"<\/code>: Prevent a new tab from using the JavaScript <code>window.opener<\/code> feature, which could potentially access the page containing the link (your site) to perform malicious things, like stealing information or sharing infected code. Using this with <code>target=\"_blank\"<\/code> is <a href=\"https:\/\/jakearchibald.com\/2016\/performance-benefits-of-rel-noopener\/\" rel=\"noopener\">often a good idea<\/a>.<\/li><li><code>rel=\"noreferrer\"<\/code>: Prevent other sites or tracking services (e.g. Google Analytics) from identifying your page as the source of clicked link.<\/li><\/ul>\n\n\n\n<p>You can use multiple space-separated values if you need to (e.g. <code>rel=\"noopener noreferrer\"<\/code>)<\/p>\n\n\n\n<p>And finally, some <code>rel<\/code> attributes come from <a href=\"http:\/\/microformats.org\/wiki\/rel-faq#How_is_rel_used\" rel=\"noopener\">the microformats standard<\/a> or the <a href=\"https:\/\/indieweb.org\/rel-me\" rel=\"noopener\">indieweb<\/a> like:<\/p>\n\n\n\n<ul><li><code>rel=\"directory\"<\/code>: Indicates that the destination of the hyperlink is a directory listing containing an entry for the current page.<\/li><li><code>rel=\"tag\"<\/code>: Indicates that the destination of that hyperlink is an author-designated &#8220;tag&#8221; (or keyword\/subject) for the current page.<\/li><li><code>rel=\"payment\"<\/code>: Indicates that the destination of that hyperlink provides a way to show or give support for the current page.<\/li><li><code>rel=\"help\"<\/code>: States that the resource linked to is a help file or FAQ for the current document.<\/li><li><code>rel=\"me\"<\/code>: Indicates that its destination represents the same person or entity as the current page.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"aria-roles\">ARIA roles<\/h4>\n\n\n<p>The default role of a link is <code>link<\/code>, so you do <em>not<\/em> need to do:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a role=\"link\" href=\"\/\">Link&lt;\/a><\/code><\/pre>\n\n\n\n<p>You&#8217;d only need that if you were faking a link, which would be a weird\/rare thing to ever need to do, and you&#8217;d have to use some JavaScript in addition to this to make it actually follow the link.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;span class=\"link\" tabindex=\"0\" role=\"link\" data-href=\"\/\">\n  Fake accessible link created using a span\n&lt;\/span><\/code><\/pre>\n\n\n\n<p>Just looking above you can see how much extra work faking a link is, and that is before you consider that is breaks right-clicking, doesn&#8217;t allow opening in a new tab, doesn&#8217;t work with Windows High Contrast Mode and other reader modes and assistive technology. Pretty bad!<\/p>\n\n\n\n<p>A useful ARIA role to <a href=\"https:\/\/tink.uk\/using-the-aria-current-attribute\/\" rel=\"noopener\">indicate the current<\/a> page, like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/\" aria-current=\"page\">Home&lt;\/a>\n&lt;a href=\"\/contact\">Contact&lt;\/a>\n&lt;a href=\"\/about\">About\/a>&lt;\/a><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"should-you-use-the-title-attribute\">Should you use the <code>title<\/code> attribute?<\/h4>\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/title#Accessibility_concerns\" rel=\"noopener\">Probably not<\/a>. Save this for giving an <code>iframe<\/code> a short, descriptive title.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a title=\"I don't need to be here\" href=\"\/\">\n  List of Concerts\n&lt;\/a><\/code><\/pre>\n\n\n\n<p><code>title<\/code> provides a hover-triggered UI popup showing the text you wrote. You can&#8217;t style it, and it&#8217;s <a href=\"https:\/\/www.24a11y.com\/2017\/the-trials-and-tribulations-of-the-title-attribute\/\" rel=\"noopener\">not really that accessible<\/a>. <\/p>\n\n\n\n<p>Hover-triggered is the key phrase here. It&#8217;s unusable on any touch-only device. If a link needs more contextual information, provide that in actual content around the link, or use descriptive text the link itself (as opposed to something like &#8220;Click Here&#8221;).<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"icon-only-links\">Icon-only links<\/h4>\n\n\n<p>If a link only has an icon inside it, like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/\">&#x1f603;&lt;\/a>\n\n&lt;a href=\"\/\">\n  &lt;svg> ... &lt;\/svg>\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>That isn&#8217;t enough contextual information about the link, particularly for accessibility reasons, but <a href=\"https:\/\/thomasbyttebier.be\/blog\/the-best-icon-is-a-text-label\" rel=\"noopener\">potentially for anybody<\/a>. Links with text are almost always more clear. If you absolutely can&#8217;t use text, you can use a pattern like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/\">\n  &lt;!-- Hide the icon from assistive technology -->\n  &lt;svg aria-hidden=\"true\" focusable=\"false\"> ... &lt;\/svg>\n  &lt;!-- Acts as a label that is hidden from view -->\n  &lt;span class=\"visually-hidden\">Useful link text&lt;\/span>\n&lt;\/a><\/code><\/pre>\n\n\n\n<p><code>visually-hidden<\/code> is a class used to visually hide the label text with CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}<\/code><\/pre>\n\n\n\n<p>Unlike <code>aria-label<\/code>, visually hidden text can be translated and will hold up better in <a href=\"https:\/\/css-tricks.com\/reader-mode-the-button-to-beat\/\">specialized browsing modes<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"links-around-images\">Links around images<\/h4>\n\n\n<p>Images can be links if you wrap them in a link. There is no need to use the alt text to say the image is a link, as assistive technology will do that already.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/buy\/puppies\/now\">\n  &lt;img src=\"puppy.jpg\" alt=\"A happy puppy.\">\n&lt;\/a><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"links-around-bigger-chunks-of-content\">Links around bigger chunks of content<\/h4>\n\n\n<p>You can link a whole area of content, like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/article\/\">\n  &lt;div class=\"card\">\n    &lt;h2>Card&lt;\/h2>\n    &lt;img src=\"...\" alt=\"...\">\n    &lt;p>Content&lt;\/p>\n  &lt;\/div>\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>But of course, there are UX implications. For example, it can be harder to select the text, and the entire element needs fairly complex styling to create clear focus and hover states. There are also <a href=\"https:\/\/adrianroselli.com\/2020\/02\/block-links-cards-clickable-regions-etc.html\" rel=\"noopener\">accessibility implications<\/a>, like the fact that the content of the entire card is read before it is announced as a link.<\/p>\n\n\n\n<p>Here&#8217;s an example with two approaches. The first wraps the entire card in a link. This is valid, but remember the implications. The second has a link inside the title, and the link has a pseudo-element on it that covers the entire card. This also has implications (a bit awkward to select text, for example), but is perhaps more expected for assistive technology. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBdZeNo\" src=\"\/\/codepen.io\/anon\/embed\/qBdZeNo?height=450&amp;theme-id=1&amp;slug-hash=qBdZeNo&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBdZeNo\" title=\"CodePen Embed qBdZeNo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The second example also opens up the possibility of including multiple links. You <a href=\"https:\/\/css-tricks.com\/nested-links\/\">can&#8217;t nest links<\/a>, so things get a little tricky if you need to. <a href=\"https:\/\/www.sarasoueidan.com\/blog\/nested-links\/\" rel=\"noopener\">It&#8217;s possible though<\/a>, by making the individual links set above the card-covering link with z-index. <\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"links-heading-2\">Styling and CSS considerations<\/h3>\n\n\n<p>Here&#8217;s the default look of a link:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/default-link.png?resize=442%2C119&#038;ssl=1\" alt=\"\" class=\"wp-image-301494\" width=\"442\" height=\"119\" data-recalc-dims=\"1\" \/><figcaption>The default User-Agent styling of a link.<\/figcaption><\/figure>\n\n\n\n<p>It&#8217;s likely you&#8217;ll be changing the style of your links, and also likely you&#8217;ll use CSS to do it. I could make all my links red in CSS by doing:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a {\n  color: red;\n}<\/code><\/pre>\n\n\n\n<p>Sometimes selecting and styling <em>all<\/em> links on a page is a bit heavy-handed, as links in navigation might be treated entirely differently than links within text. You can always <em>scope<\/em> selectors to target links within particular areas like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Navigation links *\/\nnav a { }\n\n\/* Links in an article *\/\narticle a { }\n\n\/* Links contained in an element with a \"text\" class *\/\n.text a { }<\/code><\/pre>\n\n\n\n<p>Or select the link directly to style.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.link {\n  \/* For styling &lt;a class=\"link\" href=\"\/\"> *\/\n}\n\na[aria-current=\"page\"] {\n  \/* You'll need to apply this attribute yourself, but it's a great pattern to use for active navigation. *\/\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"link-states\">Link states<\/h4>\n\n\n<p>Links are focusable elements. In other words, they can be selected using the <code>Tab<\/code> key on a keyboard. Links are perhaps the most common element where you&#8217;ll very consciously design the different states, including a <code>:focus<\/code> state.<\/p>\n\n\n\n<ul><li><code>:hover<\/code>: For styling when a mouse pointer is over the link.<\/li><li><code>:visited<\/code>: For styling when the link has been followed, as best as the browser can remember. It has limited styling ability due to security.<\/li><li><code>:link<\/code>: For styling when a link has <em>not<\/em> been visited.<\/li><li><code>:active<\/code>: For styling when the link is pressed (e.g. the mouse button is down or the element is being tapped on a touch screen).<\/li><li><code>:focus<\/code>: Very important! Links should always have a focus style. If you choose to remove the default blue outline that most browsers apply, also use this selector to <a href=\"https:\/\/css-tricks.com\/focusing-on-focus-styles\/\">re-apply a visually obvious focus style<\/a>.<\/li><\/ul>\n\n\n\n<p>These are chainable like any pseudo-class, so you could do something like this if it is useful for your design\/UX.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">\/* Style focus and hover states in a single ruleset *\/\na:focus:hover { }<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"you-can-style-a-link-to-look-button-like\">You can style a link to look button-like<\/h4>\n\n\n<p>Perhaps some of the confusion between links and buttons is stuff like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-08-at-8.55.49-PM.png?resize=264%2C142&#038;ssl=1\" alt=\"\" class=\"wp-image-301534\" width=\"264\" height=\"142\" data-recalc-dims=\"1\" \/><figcaption>Very cool &#8220;button&#8221; style from <a href=\"https:\/\/codepen.io\/kathykato\/pen\/gOOjgmP\" rel=\"noopener\">Katherine Kato<\/a>.<\/figcaption><\/figure>\n\n\n\n<p>That certainly looks like a button! Everyone would call that a button. Even a design system would likely call that a button and perhaps have a class like <code>.button { }<\/code>. But! A thing you can click that says &#8220;Learn More&#8221; is <a href=\"https:\/\/css-tricks.com\/css-basics-styling-links-like-boss\/\">very much a link, not a button<\/a>. That&#8217;s completely fine, it&#8217;s just yet another reminder to use the semantically and functionally correct element. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"color-contrast\">Color contrast<\/h4>\n\n\n<p>Since we often style links with a distinct color, it&#8217;s important to use a color with sufficient color contrast for accessibility. There is a wide variety of visual impairments (see the tool <a href=\"https:\/\/whocanuse.com\/\" rel=\"noopener\">WhoCanUse<\/a> for simulating color combinations with different impairments) and high contrast helps nearly all of them. <\/p>\n\n\n\n<p>Perhaps you set a blue color for links:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/blue-links.png?resize=413%2C147&#038;ssl=1\" alt=\"\" class=\"wp-image-301621\" width=\"413\" height=\"147\" data-recalc-dims=\"1\" \/><figcaption>The blue link is #2196F3.<\/figcaption><\/figure><\/div>\n\n\n\n<p>While that might look OK to you, it&#8217;s better to use tools for testing to ensure the color has a strong enough ratio according to <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/accessibility\/accessible-styles#color_and_contrast\" rel=\"noopener\">researched guidelines<\/a>. Here, I&#8217;ll look at Chrome DevTools and it will tell me this color is not compliant in that it doesn&#8217;t have enough contrast with the background color behind it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-09-at-2.22.20-PM.png?resize=469%2C430&#038;ssl=1\" alt=\"\" class=\"wp-image-301622\" width=\"469\" height=\"430\" data-recalc-dims=\"1\" \/><figcaption>Chrome DevTools is telling us this link color does <em>not<\/em> have enough contrast.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Color contrast is a big consideration with links, not just because they are often colored in a unique color that needs to be checked, but because they have all those different states (hover, focus, active, visited) which also might have different colors. Compound that with the fact that text can be selected and you&#8217;ve got a lot of places to consider contrast. <a href=\"https:\/\/css-tricks.com\/a-whole-bunch-of-places-to-consider-contrast-in-a-single-paragraph\/\">Here&#8217;s an article about all that.<\/a> <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"styling-types-of-links\">Styling &#8220;types&#8221; of links<\/h4>\n\n\n<p>We can get clever in CSS with attribute selectors and figure out what kind of resource a link is pointing to, assuming the <code>href<\/code> value has useful stuff in it. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Style all links that include .pdf at the end *\/\na[href$=\".pdf\"]::after {\n  content: \" (PDF)\";\n}\n\n\/* Style links that point to Google *\/\na[href*=\"google.com\"] {\n  color: purple;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"styling-links-for-print\">Styling links for print<\/h4>\n\n\n<p>CSS has an <a href=\"https:\/\/css-tricks.com\/the-at-rules-of-css\/\">&#8220;at-rule&#8221;<\/a> for declaring styles that only take effect on printed media (e.g. printing out a web page). You can include them in any CSS like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@media print {\n  \/* For links in content, visually display the link *\/ \n  article a::after { \n    content: \" (\" attr(href) \")\";\n  }\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"resetting-styles\">Resetting styles<\/h4>\n\n\n<p>If you needed to take all the styling off a link (or really any other element for that matter), CSS provides a way to remove all the styles using the <code>all<\/code> property.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.special-area a {\n  all: unset;\n  all: revert;\n  \n  \/* Start from scratch *\/\n  color: purple;\n}<\/code><\/pre>\n\n\n\n<p>You can also remove individual styles with keywords. (Again, this isn&#8217;t really unique to links, but is generically useful):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a {\n  \/* Grab color from nearest parent that sets it *\/\n  color: inherit;\n\n  \/* Wipe out style (turn black) *\/\n  color: initial;\n\n  \/* Change back to User Agent style (blue) *\/\n  color: revert;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"links-heading-3\">JavaScript considerations<\/h3>\n\n\n<p>Say you wanted to stop the clicking of a link from doing what it normally does: go to that link or jump around the page. In JavaScript, you can use<code>preventDefault<\/code> to prevent jumping around.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const jumpLinks = document.querySelectorAll(\"a[href^='#']\");\n\njumpLinks.forEach(link => {\n link.addEventListener('click', event => {\n    event.preventDefault();\n    \/\/ Do something else instead, like handle the navigation behavior yourself\n  });\n});<\/code><\/pre>\n\n\n\n<p>This kind of thing is at the core of how &#8220;Single Page Apps&#8221; (SPAs) work. They intercept the clicks so browsers don&#8217;t take over and handle the navigation. <\/p>\n\n\n\n<p>SPAs see where you are trying to go (within your own site), load the data they need, replace what they need to on the page, and update the URL. It&#8217;s an awful lot of work to replicate what the browser does for free, but you get the ability to do things like animate between pages.<\/p>\n\n\n\n<p>Another JavaScript concern with links is that, when a link to another page is clicked, the page is left and another page loads. That can be problematic for something like a page that contains a form the user is filling out but hasn&#8217;t completed. If they click the link and leave the page, they lose their work! Your only opportunity to prevent the user from leaving is by using the <code>beforeunload<\/code> event. <\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">window.addEventListener(\"beforeunload\", function(event) {\n  \/\/ Remind user to save their work or whatever.\n});<\/code><\/pre>\n\n\n\n<p>A link that has had its default behavior removed won&#8217;t announce the new destination. This means a person using assistive technology may not know where they wound up. You&#8217;ll have to do things like update the page&#8217;s title and move focus back up to the top of the document.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"javascript-frameworks\">JavaScript frameworks<\/h4>\n\n\n<p>In a JavaScript framework, like <a href=\"https:\/\/reactjs.org\/\" rel=\"noopener\">React<\/a>, you might sometimes see links created from something like a <code>&lt;Link \/><\/code> component rather than a native <code>&lt;a><\/code> element. The custom component probably creates a native <code>&lt;a><\/code> element, but with extra functionality, like enabling the JavaScript router to work, and adding attributes like <code>aria-current=\"page\"<\/code> as needed, which is a good thing!<\/p>\n\n\n\n<p>Ultimately, a link is a link. A JavaScript framework might offer or encourage some level of abstraction, but you&#8217;re always free to use regular links.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"links-heading-4\">Accessibility considerations<\/h3>\n\n\n<p>We covered some accessibility in the sections above (it\u2019s all related!), but here are some more things to think about.<\/p>\n\n\n\n<ul><li>You don\u2019t need text like \u201cLink\u201d or \u201cGo to\u201d in the link text itself. Make the text meaningful (\u201cdocumentation\u201d instead of \u201cclick here\u201d).<\/li><li>Links already have an ARIA role by default (<code>role=\"link\"<\/code>) so there&#8217;s no need to explicitly set it.<\/li><li>Try not to use the URL itself as the text (<code>&lt;a href=\"google.com\"&gt;google.com&lt;\/a&gt;<\/code>)<\/li><li>Links are <em>generally<\/em> blue and <em>generally<\/em> underlined and that&#8217;s <a href=\"https:\/\/adrianroselli.com\/2016\/06\/on-link-underlines.html\" rel=\"noopener\">generally good<\/a>.<\/li><li>All images in content should have <code>alt<\/code> text anyway, but doubly so when the image is wrapped in a link with otherwise no text.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"unique-accessible-names\">Unique accessible names<\/h4>\n\n\n<p>Some assistive technology can create <strong>lists of interactive elements on the page<\/strong>. Imagine a group of four article cards that all have a &#8220;Read More&#8221;, the list of interactive elements will be like:<\/p>\n\n\n\n<ul><li>Read More<\/li><li>Read More<\/li><li>Read More<\/li><li>Read More<\/li><\/ul>\n\n\n\n<p>Not very useful. You could make use of that <code>.visually-hidden<\/code> class we covered to make the links more like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"\/article\">\n  Read More\n  &lt;span class=\"visually-hidden\">\n    of the article \"Dancing with Rabbits\".\n  &lt;span>\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>Now each link is unique and clear. If the design can support it, do it <em>without<\/em> the visually hidden class to remove the ambiguity for everyone.<\/p>\n\n\n\n<\/div>\n<div class=\"two-column-guide-right\">\n\n\n<h2 class=\"wp-block-heading\" id=\"buttons\">Buttons<\/h2>\n\n\n<p>Buttons are for triggering actions. When do you use the <code>&lt;button&gt;<\/code> element? A <strong>good rule<\/strong> is to use a button when there is \u201cno meaningful <code>href<\/code>.\u201d Here\u2019s another way to think of that: if clicking it doesn\u2019t do anything without JavaScript, it should be a <code>&lt;button&gt;<\/code>.<\/p>\n\n\n\n<p>A  <code>&lt;button&gt;<\/code> that is within a <code>&lt;form&gt;<\/code>, by default, will submit that form. But aside from that, button elements don&#8217;t have any default behavior, and you&#8217;ll be wiring up that interactivity with JavaScript.<\/p>\n\n\n\n<details>\n  <summary><strong>Table of Contents<\/strong><\/summary>\n\n\n\n<ul><li><a href=\"#buttons-heading-1\">HTML implementation<\/a><\/li><li><a href=\"#buttons-heading-2\">Styling and CSS considerations<\/a><\/li><li><a href=\"#buttons-heading-3\">JavaScript considerations<\/a><\/li><li><a href=\"#buttons-heading-4\">Accessibility considerations<\/a><\/li><\/ul>\n\n\n\n<\/details>\n\n\n<h3 class=\"wp-block-heading\" id=\"buttons-heading-1\">HTML implementation<\/h3>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button>Buy Now&lt;\/button><\/code><\/pre>\n\n\n\n<p>Buttons inside of a <code>&lt;form&gt;<\/code> do something by default: they submit the form! They can also reset it, like their input counterparts. The <code>type<\/code> attributes matter:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form action=\"\/\" method=\"POST\">\n  &lt;input type=\"text\" name=\"name\" id=\"name\">\n  &lt;button>Submit&lt;\/button>\n\n  &lt;!-- If you want to be more explicit... -->\n  &lt;button type=\"submit\">Submit&lt;\/button>\n\n  &lt;!-- ...or clear the form inputs back to their initial values -->\n  &lt;button type=\"reset\">Reset&lt;\/button>\n\n  &lt;!-- This prevents a `submit` action from firing which may be useful sometimes inside a form -->\n  &lt;button type=\"button\">Non-submitting button&lt;\/button>\n&lt;\/form><\/code><\/pre>\n\n\n\n<p>Speaking of forms, buttons have some neat tricks up their sleeve where they can override attributes of the <code>&lt;form&gt;<\/code> itself.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;form action=\"\/\" method=\"get\">\n\n  &lt;!-- override the action -->\n  &lt;button formaction=\"\/elsewhere\/\" type=\"submit\">Submit to elsewhere&lt;\/button>\n\n  &lt;!-- override encytype -->\n  &lt;button formenctype=\"multipart\/form-data\" type=\"submit\">&lt;\/button>\n\n  &lt;!-- override method -->\n  &lt;button formmethod=\"post\" type=\"submit\">&lt;\/button>\n\n  &lt;!-- do not validate fields -->\n  &lt;button formnovalidate type=\"submit\">&lt;\/button>\n\n  &lt;!-- override target e.g. open in new tab -->\n  &lt;button formtarget=\"_blank\" type=\"submit\">&lt;\/button>\n\n&lt;\/form><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"autofocus\">Autofocus<\/h4>\n\n\n<p>Since buttons are focusable elements, we can automatically focus on them when the page loads using the <code>autofocus<\/code> attribute:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"modal\">\n\n  &lt;h2>Save document?&lt;\/h2>\n\n  &lt;button>Cancel&lt;\/button>\n  &lt;button autofocus>OK&lt;\/button>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Perhaps you&#8217;d do that inside of a modal dialog where one of the actions is a default action and it helps the UX (e.g. you can press <code>Enter<\/code> to dismiss the modal). Autofocusing <em>after a user action<\/em> is perhaps the only good practice here, moving a user&#8217;s focus without their permission, as the <code>autofocus<\/code> attribute is capable of, can be a problem for screen reader and screen magnifier users.<\/p>\n\n\n\n<p class=\"explanation\">Note that<code>autofocus<\/code> may not work if the element is within an <code>&lt;iframe sandbox&gt;<\/code> for security reasons. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"disabling-buttons\">Disabling buttons<\/h4>\n\n\n<p>To prevent a button from being interactive, there is a <code>disabled<\/code> attribute you can use:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button disabled>Pay Now&lt;\/button>\n&lt;p class=\"error-message\">Correct the form above to submit payment.&lt;\/p><\/code><\/pre>\n\n\n\n<p>Note that we&#8217;ve included descriptive text alongside the disabled button. It can be very frustrating to find a disabled button and not know why it&#8217;s disabled. A better way to do this could be to let someone submit the form, and then explain why it didn&#8217;t work in the validation feedback messaging.<\/p>\n\n\n\n<p>Regardless, you could style a disabled button this way:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Might be good styles for ANY disabled element! *\/\nbutton[disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n} <\/code><\/pre>\n\n\n\n<p>We&#8217;ll cover other states and styling later in this guide. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"buttons-can-contain-child-elements\">Buttons can contain child elements<\/h4>\n\n\n<p>A submit button and a submit input (<code>&lt;input type=\"submit\"&gt;<\/code>) are identical in functionality, but different in the sense that an input is unable to contain child elements while a button can. <\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button>\n   &lt;svg aria-hidden=\"true\" focusable=\"false\">\n     &lt;path d=\"...\" \/>\n   &lt;\/svg>\n   &lt;span class=\"callout\">Big&lt;\/span>\n   Sale!\n&lt;\/button>\n\n&lt;button type=\"button\">\n  &lt;span role=\"img\" aria-label=\"Fox\">\n    &#x1f98a;\n  &lt;\/span>\n  Button\n&lt;\/button><\/code><\/pre>\n\n\n\n<p>Note the <code>focusable=\"false\"<\/code> attribute on the SVG element above. In that case, since the icon is decorative, this will help assistive technology only announce the button&#8217;s label. <\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"buttons-heading-2\">Styling and CSS considerations<\/h3>\n\n\n<p>Buttons are generally styled to look very button-like. They should look <em>pressable<\/em>. If you&#8217;re looking for inspiration on fancy button styles, you&#8217;d do well looking at <a href=\"https:\/\/codepen.io\/topic\/buttons\/picks\" rel=\"noopener\">the CodePen Topic on Buttons<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/button-styles.png?resize=1024%2C977&#038;ssl=1\" alt=\"\" class=\"wp-image-302143\" data-recalc-dims=\"1\"\/><figcaption><a href=\"https:\/\/codepen.io\/jouanmarcel\/pen\/RwweKqb\" rel=\"noopener\">1<\/a>, <a href=\"https:\/\/codepen.io\/Zeindelf\/pen\/vZbyEg\" rel=\"noopener\">2<\/a>, <a href=\"https:\/\/codepen.io\/wallas\/pen\/lFABr\" rel=\"noopener\">3<\/a>, <a href=\"https:\/\/codepen.io\/tmrDevelops\/pen\/VeRvKX\" rel=\"noopener\">4<\/a>, <a href=\"https:\/\/codepen.io\/DeptofJeffAyer\/pen\/waLYxy\" rel=\"noopener\">5<\/a>, <a href=\"https:\/\/codepen.io\/ARS\/pen\/vEwEPP\" rel=\"noopener\">6<\/a><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"cross-browser-platform-button-styles\">Cross-browser\/platform button styles<\/h4>\n\n\n<p>How buttons look by default varies by browser and platform. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-11-at-5.50.45-AM.png?resize=368%2C182&#038;ssl=1\" alt=\"\" class=\"wp-image-301736\" width=\"368\" height=\"182\" data-recalc-dims=\"1\" \/><figcaption>Just on macOS: Chrome, Safari, and Firefox (they look the same)<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/button-differences.png?resize=391%2C210&#038;ssl=1\" alt=\"\" class=\"wp-image-301737\" width=\"391\" height=\"210\" data-recalc-dims=\"1\" \/><figcaption>Add <code>border: 0;<\/code> to those same buttons as above, and we have different styles entirely.<\/figcaption><\/figure><\/div>\n\n\n\n<p>While there is some UX truth to leaving the defaults of form elements alone so that they match that browser\/platform&#8217;s style and you get some <a href=\"https:\/\/en.wikipedia.org\/wiki\/Affordance\" rel=\"noopener\">affordance<\/a> for free, designers typically don&#8217;t like default styles, particularly ones that differ across browsers.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"resetting-the-default-button-style\">Resetting the default button style<\/h4>\n\n\n<p>Removing all the styles from a button is easier than you think. You&#8217;d think, as a form control, <code>appearance: none;<\/code> would help, but don&#8217;t count on that. Actually <code>all: revert;<\/code> is a better bet to wipe the slate clean. <\/p>\n\n\n\n<p>You can see how a variety of properties are involved<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/01\/button.mp4\"><\/video><\/figure>\n\n\n\n<p>And that&#8217;s not all of them. Here&#8217;s a consolidated chunk of <a href=\"https:\/\/github.com\/necolas\/normalize.css\/blob\/master\/normalize.css\" rel=\"noopener\">what Normalize does<\/a> to buttons. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">button {\n  font-family: inherit; \/* For all browsers *\/\n  font-size: 100%; \/* For all browsers *\/\n  line-height: 1.15; \/* For all browsers *\/\n  margin: 0; \/* Firefox and Safari have margin *\/\n  overflow: visible; \/* Edge hides overflow *\/\n  text-transform: none; \/* Firefox inherits text-transform *\/\n  -webkit-appearance: button; \/* Safari otherwise prevents some styles *\/\n}\n\nbutton::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\nbutton:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"a-consistent-button-class\">A consistent <code>.button<\/code> class<\/h4>\n\n\n<p>In addition to <a href=\"https:\/\/css-tricks.com\/reboot-resets-reasoning\/\">using reset or baseline CSS<\/a>, you may want to have a class for buttons that gives you a strong foundation for styling and works across both links and buttons.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.button {\n  border: 0;\n  border-radius: 0.25rem;\n  background: #1E88E5;\n  color: white;\n  font-family: -system-ui, sans-serif;\n  font-size: 1rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-decoration: none;\n  padding: 0.25rem 0.5rem;\n  margin: 0.25rem;\n  cursor: pointer;\n}<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/yjJwjL\" rel=\"noopener\">Check out this Pen<\/a> to see why all these properties are needed to make sure it works correctly across elements. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"button-states\">Button states<\/h4>\n\n\n<p>Just as with links, you&#8217;ll want to style the states of buttons.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">button:hover { }\nbutton:focus { }\nbutton:active { }\nbutton:visited { } \/* Maybe less so *\/<\/code><\/pre>\n\n\n\n<p>You may also want to <a href=\"https:\/\/css-tricks.com\/user-facing-state\/\">use ARIA attributes for styling<\/a>, which is a neat way to encourage using them correctly:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">button[aria-pressed=\"true\"] { }\nbutton[aria-pressed=\"false\"] { }<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"link-styled-buttons\">Link-styled buttons<\/h4>\n\n\n<p>There are always exceptions. For example, a website in which you need a button-triggered action within a sentence:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>You may open your &lt;button>user settings&lt;\/button> to change this.&lt;\/p><\/code><\/pre>\n\n\n\n<p>We&#8217;ve used a button instead of an anchor tag in the above code, as this hypothetical website opens user settings in a modal dialog rather than linking to another page. In this situation, you may want to style the button as if it looks like a link. <\/p>\n\n\n\n<p>This is probably rare enough that you would probably make a class (e.g. <code>.link-looking-button<\/code>) that incorporates the reset styles from above and otherwise matches what you do for anchor links.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"breakout-buttons\">Breakout buttons<\/h4>\n\n\n<p>Remember earlier when we talked about the possibility of wrapping entire elements in links? If you have a button within another element, but you want that <em>entire<\/em> outer element to be clickable\/tappable as if it&#8217;s the button, that&#8217;s <a href=\"https:\/\/css-tricks.com\/breakout-buttons\/\">a &#8220;breakout&#8221; button<\/a>. You can use an absolutely-positioned pseudo-element on the button to expand the clickable area to the whole region. Fancy!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWKmqRm\" src=\"\/\/codepen.io\/anon\/embed\/NWKmqRm?height=450&amp;theme-id=1&amp;slug-hash=NWKmqRm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWKmqRm\" title=\"CodePen Embed NWKmqRm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"buttons-heading-3\">JavaScript considerations<\/h3>\n\n\n<p>Even without JavaScript, button elements can be triggered by the <code>Space<\/code> and <code>Enter<\/code> keys on a keyboard. That&#8217;s part of what makes them such appealing and useful elements: they are discoverable, focusable, and interactive with assistive technology in a predictable way. <\/p>\n\n\n\n<p>Perhaps any <code>&lt;button&gt;<\/code> in that situation should be inserted into the DOM <em>by<\/em> JavaScript. A tall order! Food for thought. &#x1f914;<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"once-handlers\">&#8220;Once&#8221; handlers<\/h4>\n\n\n<p>Say a button does something pretty darn important, like submitting a payment. It would be pretty scary if it was programmed such that clicking the button multiple times submitted multiple payment requests. It is situations like this where you would attach a click handler to a button that only runs once. To make that clear to the user, we&#8217;ll disable the button on click as well.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.querySelector(\"button\").addEventListener('click', function(event) {\n  event.currentTarget.setAttribute(\"disabled\", true);\n}, {\n    once: true\n});<\/code><\/pre>\n\n\n\n<p>Then you would intentionally un-disable the button and reattach the handler when necessary.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"inline-handlers\">Inline handlers<\/h4>\n\n\n<p>JavaScript can be executed by activating a button through code on the button itself:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button onclick=\"console.log('clicked');\">\n  Log it.\n&lt;\/button>\n\n&lt;button onmousedown=\"\">\n&lt;\/button>\n\n&lt;button onmouseup=\"\">\n&lt;\/button><\/code><\/pre>\n\n\n\n<p>That practice went from being standard practice to being a faux pas (not abstracting JavaScript functionality away from HTML) to, <em>eh, you need it when you need it<\/em>. One advantage is that if you&#8217;re injecting this HTML into the DOM, you don&#8217;t need to bind\/re-bind JavaScript event handlers to it because it already has one.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"javascript-frameworks\">JavaScript frameworks<\/h4>\n\n\n<p>It&#8217;s common in any JavaScript framework to make a component for handling buttons, as buttons typically have lots of variations. Those variations can be turned into an API of sorts. For example, in React:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const Button = ({ className, children }) => {\n  const [activated, setActivated] = React.useState(false);\n  return (\n    &lt;button\n      className={`button ${className}`}\n      aria-pressed={activated ? \"true\" : \"false\"}\n      onClick={() => setActivated(!activated)}\n    >\n      {children}\n    &lt;\/button>\n  );\n};<\/code><\/pre>\n\n\n\n<p>In that example, the <code>&lt;Button \/&gt;<\/code> component ensures the button will have a <code>button<\/code> class and handles a toggle-like active class.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"buttons-heading-4\">Accessibility considerations<\/h3>\n\n\n<p>The biggest accessibility consideration with buttons is <em>actually using<\/em> buttons. Don&#8217;t try to replicate a button with a <code>&lt;div&gt;<\/code> or a <code>&lt;span&gt;<\/code>, which is, unfortunately, more common than you might think. It&#8217;s very likely that will cause problems. (Did you deal with focusability? Did you deal with keyboard events? Great. There&#8217;s still probably more stuff you&#8217;re forgetting.) <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"focus-styles\">Focus styles<\/h4>\n\n\n<p>Like all focusable elements, browsers apply a default focus style, which is usually a blue outline.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-13-at-3.01.17-PM.png?resize=241%2C82&#038;ssl=1\" alt=\"\" class=\"wp-image-301876\" width=\"241\" height=\"82\" data-recalc-dims=\"1\" \/><figcaption>Focus styles on Chrome\/macOS<\/figcaption><\/figure><\/div>\n\n\n\n<p>While it&#8217;s arguable that you should leave that alone as it&#8217;s a very clear and obvious style for people that benefit from focus styles, it&#8217;s also not out of the question to change it.<\/p>\n\n\n\n<p>What you should <em>not<\/em> do is <code>button:focus { outline: 0; }<\/code> to remove it. If you ever remove a focus style like that, put it back at the same time.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">button:focus {\n  outline: 0; \/* Removes the default blue ring *\/\n\n  \/* Now, let's create our own focus style *\/\n  border-radius: 3px;\n  box-shadow: 0 0 0 2px red;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/focused-red.png?resize=289%2C111&#038;ssl=1\" alt=\"\" class=\"wp-image-301878\" width=\"289\" height=\"111\" data-recalc-dims=\"1\" \/><figcaption>Custom focus style<\/figcaption><\/figure><\/div>\n\n\n\n<p>The fact that a button may become focused when clicked and apply that style at the same time is offputting to some. There is a trick (that has limited, but increasing, <a href=\"https:\/\/caniuse.com\/#feat=css-focus-visible\" rel=\"noopener\">browser support<\/a>) on removing focus styles from clicks and not keyboard events:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:focus:not(:focus-visible) { \n  outline: 0; \n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"aria\">ARIA<\/h4>\n\n\n<p>Buttons already have the <code>role<\/code> they need (<code>role=\"button\"<\/code>). But there are some other ARIA attributes that are related to buttons:<\/p>\n\n\n\n<ul><li><code>aria-pressed<\/code>: Turns a button into a <strong>toggle<\/strong>, between <code>aria-pressed=\"true\"<\/code> and <code>aria-pressed=\"false\"<\/code>. <a href=\"https:\/\/inclusive-components.design\/toggle-button\/\" rel=\"noopener\">More on button toggles<\/a>, which can also be done with <code>role=\"switch\"<\/code> and <code>aria-checked=\"true\"<\/code>.<\/li><li><code>aria-expanded<\/code>: If the button controls the open\/closed state of another element (like a dropdown menu), you apply this attribute to indicate that like <code>aria-expanded=\"true\"<\/code>.<\/li><li><code>aria-label<\/code>: Overrides the text within the button. This is useful for labeling buttons that otherwise don&#8217;t have text, but you&#8217;re still probably better off using a <code>visually-hidden<\/code> class so it can be translated.<\/li><li><code>aria-labelledby<\/code>: Points to an element that will act as the label for the button.<\/li><\/ul>\n\n\n\n<p>For that last one:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;button aria-labelledby=\"buttonText\">\n  Time is running out! \n  &lt;span id=\"buttonText\">Add to Cart&lt;\/span>\n&lt;\/button><\/code><\/pre>\n\n\n\n<p>Deque has <a href=\"https:\/\/www.deque.com\/blog\/accessible-aria-buttons\/\" rel=\"noopener\">a deeper dive blog post into button accessibility<\/a> that includes much about ARIA. <\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"dialogs\">Dialogs<\/h4>\n\n\n<p>If a button opens a dialog, your job is to <a href=\"https:\/\/css-tricks.com\/a-css-approach-to-trap-focus-inside-of-an-element\/\">move the focus inside and trap it there.<\/a> When closing the dialog, you need to return focus back to that button so the user is back exactly where they started. This makes the experience of using a modal the same for someone who relies on assistive technology as for someone who doesn&#8217;t.<\/p>\n\n\n\n<p>Focus management isn&#8217;t just for dialogs, either. If clicking a button runs a calculation and changes a value on the page, there is no context change there, meaning focus should remain on the button. If the button does something like &#8220;move to next page,&#8221; the focus should be moved to the start of that next page.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"size\">Size<\/h4>\n\n\n<p>Don&#8217;t make buttons too small. That goes for links and any sort of interactive control. People with any sort of reduced dexterity <a href=\"https:\/\/www.w3.org\/WAI\/perspective-videos\/controls\/\" rel=\"noopener\">will benefit<\/a>.<\/p>\n\n\n\n<p>The classic Apple guideline for the <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/visual-design\/adaptivity-and-layout\/\" rel=\"noopener\">minimum size for a touch target<\/a> (button) is 44x44pt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/interactivity-hit-areas_2x.png?resize=1024%2C650&#038;ssl=1\" alt=\"\" class=\"wp-image-302149\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.lukew.com\/ff\/entry.asp?1085\" rel=\"noopener\">Here&#8217;s some guidelines from other companies<\/a>. <a href=\"https:\/\/adrianroselli.com\/2019\/06\/target-size-and-2-5-5.html#Fitts\" rel=\"noopener\">Fitt&#8217;s Law<\/a> tells us smaller targets have greater error rates. <a href=\"https:\/\/web.dev\/tap-targets\/\" rel=\"noopener\">Google even takes button sizes into consideration<\/a> when evaluating the SEO of a site.<\/p>\n\n\n\n<p>In addition to ample size, <a href=\"https:\/\/a11yproject.com\/posts\/large-touch-targets\/\" rel=\"noopener\">don&#8217;t place buttons too close each other<\/a>, whether they&#8217;re stacked vertically or together on the same line. Give them some margin because people experiencing motor control issues run the risk of clicking the wrong one.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"activating-buttons\">Activating buttons<\/h4>\n\n\n<p>Buttons work by being clicked\/touched, pressing the <code>Enter<\/code> key, or pressing the <code>Space<\/code> key (when focused). Even if you add <code>role=\"button\"<\/code> to a link or div, you won&#8217;t get the spacebar functionality, so at the risk of beating a dead horse, use <code>&lt;button&gt;<\/code> in those cases. <\/p>\n\n\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.<\/p>\n","protected":false},"author":3,"featured_media":303784,"comment_status":"open","ping_status":"closed","sticky":false,"template":"guide-special.php","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1488,1331],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/buttons-links-guide.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":159789,"url":"https:\/\/css-tricks.com\/use-button-element\/","url_meta":{"origin":297030,"position":0},"title":"When To Use The Button Element","date":"January 7, 2014","format":false,"excerpt":"You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out. It looks like this: Do Something What's the most common result of clicking something on\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":354978,"url":"https:\/\/css-tricks.com\/buttons-vs-links\/","url_meta":{"origin":297030,"position":1},"title":"Buttons vs. Links","date":"November 1, 2021","format":false,"excerpt":"There are thousands of articles out there about buttons and links on the web; the differences and how to use them properly. Hey, I don't mind. I wrote my own as well\u00b9. It's such a common mistake on the web that it's always worth repeating: Is the intention to send\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/buttons-links-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322469,"url":"https:\/\/css-tricks.com\/how-to-recreate-the-ripple-effect-of-material-design-buttons\/","url_meta":{"origin":297030,"position":2},"title":"How to Recreate the Ripple Effect of Material Design Buttons","date":"October 12, 2020","format":false,"excerpt":"When I first discovered Material Design, I was particularly inspired by its button component. It uses a ripple effect to give users feedback in a simple, elegant way. How does this effect work? Material Design's buttons don't just sport a neat ripple animation, but the animation also changes position depending\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/unsplash-alihartmann-ripples.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":261335,"url":"https:\/\/css-tricks.com\/a-bit-on-buttons\/","url_meta":{"origin":297030,"position":3},"title":"A Bit on Buttons","date":"October 14, 2017","format":false,"excerpt":"Here's three recent things that have come across my desk in recent days regarding buttons. One, an accessibility flub that needed to be fixed. Two, an article about the fundamental differences between links and buttons but how they can look too similar for our own good. Three, the logical extreme\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311785,"url":"https:\/\/css-tricks.com\/the-many-bad-and-good-patterns-for-close-buttons\/","url_meta":{"origin":297030,"position":4},"title":"The Many Bad (and Good!) Patterns for Close Buttons","date":"May 27, 2020","format":false,"excerpt":"Manuel Matuzovi\u0107 details 10 bad HTML patterns for a close button. You know, stuff like this: <a class=\"close\" onclick=\"close()\">\u00d7<\/a> Why is that bad? There is no href there, so it really isn't a link (close buttons aren't links). Not to mention the missing href makes this \"placeholder link\" unfocusable. Plus,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/htmlhell.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376237,"url":"https:\/\/css-tricks.com\/styling-buttons-in-wordpress-block-themes\/","url_meta":{"origin":297030,"position":5},"title":"Styling Buttons in WordPress Block Themes","date":"January 9, 2023","format":false,"excerpt":"A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding CSS box shadows on WordPress blocks and elements. There\u2019s a lot of great stuff in there that leverages new features that shipped in WordPress 6.1 that provide controls for applying\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/wordpress-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/buttons-links-guide.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297030"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=297030"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297030\/revisions"}],"predecessor-version":[{"id":364115,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297030\/revisions\/364115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/303784"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=297030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=297030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=297030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}