# Button Animation

**URL:** <https://community.shopify.com/t/button-animation/712452>\
**Category:** Shopify Discussion\
**Tags:** design, css\
**Created:** [November 9, 2026, 10:33am UTC](https://community.shopify.com/t/button-animation/712452 "2026-11-09T10:33:49Z")\
**Posts on this page:** 11\
**Page:** 1

## AI-generated summary

The requester wanted a Shopify section with two portrait images beside text and a link whose underline disappears on hover. A reply noted that Prestige includes a suitable built-in “Multiple media with text” section. Because the requester uses Dawn 16.1.1, another participant supplied a custom Liquid section; after the file was mistakenly created in Assets rather than Sections, moving it to the Sections folder resolved the issue, and the requester confirmed it worked.

The requester then asked how to apply the same underline effect to buttons site-wide. A suggested global CSS rule styles Dawn buttons as underlined links, but a later reply cautioned that this also affects purchase-critical controls such as Add to cart and Checkout, potentially making them less noticeable, while branded Shop Pay or PayPal buttons remain unchanged. The latest recommendation is to exclude purchase buttons from the styling and test the changes on a duplicated theme, especially on mobile, before publishing. The custom section issue is resolved; the global styling choice remains open.

<div class="post-metadata">

**Author:** ![ellacoker](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ellacoker](https://community.shopify.com/u/ellacoker)\
**Post date:** [November 9, 2026, 10:33am UTC](https://community.shopify.com/t/button-animation/712452/1 "2026-11-09T10:33:50Z")

</div>

Hello, on my website, I am trying to create a button animation / layout similar as the second section on [https://www.temptationvacation.co/](https://www.temptationvacation.co/) - “INTERMISSIN, THE FINAL CHAPTER”.

I would like 2 x portrait images on the left and text to the right, with that button animation, underlined on before with the underline removing on hover. Could someone help me?

---

<div class="post-metadata">

**Author:** ![m.wajahatanwar](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@m.wajahatanwar](https://community.shopify.com/u/m.wajahatanwar)\
**Post date:** [November 9, 2026, 10:41am UTC](https://community.shopify.com/t/button-animation/712452/2 "2026-11-09T10:41:04Z")

</div>

This post was flagged by the community and is temporarily hidden.

---

<div class="post-metadata">

**Author:** ![topnewyork](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/topnewyork/32/55225_2.png) [@topnewyork](https://community.shopify.com/u/topnewyork)\
**Post date:** [November 9, 2026, 11:04am UTC](https://community.shopify.com/t/button-animation/712452/3 "2026-11-09T11:04:44Z")

</div>

Hi @ellacoker,

You can try this code in custom liquid block :

```auto
<div class="custom-intermissin-section">
  <div class="images-wrapper">
    <div class="portrait-img">
      <img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png" alt="Image 1">
    </div>
    <div class="portrait-img">
      <img src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png" alt="Image 2">
    </div>
  </div>
  <div class="content-wrapper">
    <h2>INTERMISSIN, THE FINAL CHAPTER</h2>
    <p>Aap yahan apni description ya sub-heading add kar sakti hain jo client ki requirement ke mutabiq ho.</p>
    <a href="#" class="hover-underline-link">EXPLORE COLLECTION</a>
  </div>
</div>

<style>
.custom-intermissin-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1300px;
  margin: 60px auto;
  padding: 0 40px;
}
.images-wrapper {
  display: flex;
  gap: 20px;
  width: 55%;
}
.portrait-img {
  width: 50%;
  height: 520px;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.portrait-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portrait-img:hover {
  transform: translateY(-6px);
}
.portrait-img:hover img {
  transform: scale(1.08);
}
.content-wrapper {
  width: 40%;
}
.content-wrapper h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: #111;
  line-height: 1.2;
}
.content-wrapper p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}
.hover-underline-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 6px;
  transition: letter-spacing 0.3s ease, color 0.3s ease;
}
.hover-underline-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  left: 0;
  bottom: 0;
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-underline-link:hover::after {
  transform: scaleX(0);
}
.hover-underline-link:hover {
  letter-spacing: 1.5px;
}
@media screen and (max-width: 768px) {
  .custom-intermissin-section {
    flex-direction: column;
    padding: 0 20px;
    gap: 30px;
  }
  .images-wrapper, .content-wrapper {
    width: 100%;
  }
  .portrait-img {
    height: 380px;
  }
}
</style>

```

---

<div class="post-metadata">

**Author:** ![InfinitePixel-Emelia](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/infinitepixel-emelia/32/418536_2.png) [@InfinitePixel-Emelia](https://community.shopify.com/u/InfinitePixel-Emelia)\
**Post date:** [November 9, 2026, 11:36am UTC](https://community.shopify.com/t/button-animation/712452/4 "2026-11-09T11:36:07Z")

</div>

Hi @ellacoker,

The site you linked is built on the Prestige theme, and that part is Prestige’s own Multiple media with text section. The underline that disappears on hover is the theme’s built in link style, so on Prestige you can do this without any code: add that section, put your two portrait images in it, then add your heading, text and a button. The button’s style setting should have a link option, which gives you that underline.

I’ve added screenshots of that section below, before and on hover.

 ![712452-1-layout](https://canada1.discourse-cdn.com/shopifyforum/original/4X/1/4/6/14644d968340c1c5ac90088ef1ecf6b400349d51.png)

 ![712452-2-before-hover](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/9/7/99786e24279f3fc08d5bbaef001276a228d1418f.png)

 ![712452-3-on-hover](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/4/8/848098ab5bd00a9375d7ddab962d6fb2473f0945.png)

---

<div class="post-metadata">

**Author:** ![Ploqo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ploqo/32/398219_2.png) [@Ploqo](https://community.shopify.com/u/Ploqo)\
**Post date:** [November 9, 2026, 11:45am UTC](https://community.shopify.com/t/button-animation/712452/5 "2026-11-09T11:45:34Z")

</div>

Hi @ellacoker

 ![After: two portraits on the left, text and underlined link on the right](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/a/b/cab6ead2cb009d69a738f0fbc2aba3a6f6dc0f15.png)

 ![Hover: the underline fades out](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/e/d/2edd04056c3743187f9631ae0a2423a63b11dc61.png)

Dawn has no section like this built in, so you add a small one. No app needed.

1. Go to **Online Store** \> **Themes**.
2. Click **…** next to your theme, then **Edit code**.

 ![Edit code](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/2/5/325b871b32c0e024cc09e1ed77ab96b26d5fedb1.png)

1. Open the **sections** folder. Click the **New file** icon and name the file `two-portraits-text.liquid`, then press Enter.

 ![New file](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/7/8/57848ff55defb5d63ecc251012268cb756fa2969.png)

1. Paste this into the empty file, then click **Save**.

```liquid
<style>
  #shopify-section-{{ section.id }} .two-portraits {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
  .two-portraits__inner {
    display: flex;
    align-items: center;
    gap: 6rem;
  }
  .two-portraits__images {
    display: flex;
    gap: 2rem;
    width: 55%;
  }
  .two-portraits__image {
    width: 50%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .two-portraits__image img,
  .two-portraits__image svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .two-portraits__text {
    width: 45%;
  }
  .two-portraits__text h2 {
    margin: 0 0 1.2rem;
  }
  .two-portraits__text p {
    margin: 0 0 2.4rem;
  }
  .two-portraits__link {
    color: currentColor;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.6rem;
    text-decoration-color: currentColor;
    transition: text-decoration-color 0.3s ease;
  }
  .two-portraits__link:hover {
    text-decoration-color: transparent;
  }
  @media screen and (max-width: 749px) {
    .two-portraits__inner {
      flex-direction: column;
      gap: 3rem;
    }
    .two-portraits__images,
    .two-portraits__text {
      width: 100%;
    }
  }
</style>

<div class="two-portraits color-{{ section.settings.color_scheme }} gradient">
  <div class="page-width two-portraits__inner">
    <div class="two-portraits__images">
      {%- for i in (1..2) -%}
        {%- assign key = 'image_' | append: i -%}
        <div class="two-portraits__image">
          {%- if section.settings[key] != blank -%}
            {{ section.settings[key] | image_url: width: 1000 | image_tag: loading: 'lazy', widths: '300, 500, 800, 1000', sizes: '(min-width: 750px) 25vw, 50vw' }}
          {%- else -%}
            {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
    <div class="two-portraits__text">
      {%- if section.settings.heading != blank -%}
        <h2 class="h2">{{ section.settings.heading | escape }}</h2>
      {%- endif -%}
      {%- if section.settings.text != blank -%}
        <p>{{ section.settings.text | escape }}</p>
      {%- endif -%}
      {%- if section.settings.button_label != blank -%}
        <a class="two-portraits__link" href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Two portraits + text",
  "settings": [
    { "type": "image_picker", "id": "image_1", "label": "Image 1" },
    { "type": "image_picker", "id": "image_2", "label": "Image 2" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Intermission, the final chapter." },
    { "type": "text", "id": "text", "label": "Text", "default": "The moments between movement and ease." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Your Intermission." },
    { "type": "url", "id": "button_link", "label": "Button link" },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 }
  ],
  "presets": [
    { "name": "Two portraits + text" }
  ]
}
{% endschema %}

```

 ![Pasted and saved](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/6/d/96dc361806d85a61a0138e86478c8752305c450c.png)

1. Go back to **Themes** and click **Customize**.
2. Click **Add section** and choose **Two portraits + text**.
3. Pick your two images and edit the text and link. Tall portrait photos look best.

 ![Section settings](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/f/2/9f253737bc47ab94c6c02b0578ef8d442ccd5d2d.png)

1. Click **Save**.

---

<div class="post-metadata">

**Author:** ![ellacoker](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ellacoker](https://community.shopify.com/u/ellacoker)\
**Post date:** [November 9, 2026, 9:40pm UTC](https://community.shopify.com/t/button-animation/712452/6 "2026-11-09T21:40:00Z")

</div>

> [@Ploqo](#):
>
> ```auto
> {% schema %}
> {
> "name": "Two portraits + text",
> "settings": [
> { "type": "image_picker", "id": "image_1", "label": "Image 1" },
> { "type": "image_picker", "id": "image_2", "label": "Image 2" },
> { "type": "text", "id": "heading", "label": "Heading", "default": "Intermission, the final chapter." },
> { "type": "text", "id": "text", "label": "Text", "default": "The moments between movement and ease." },
> { "type": "text", "id": "button_label", "label": "Button label", "default": "Your Intermission." },
> { "type": "url", "id": "button_link", "label": "Button link" },
> {
> "type": "color_scheme",
> "id": "color_scheme",
> "label": "Color scheme",
> "default": "scheme-1"
> },
> { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 },
> { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 }
> ],
> "presets": [
> { "name": "Two portraits + text" }
> ]
> }
> {% endschema %}
> 
> ```

 ![Screenshot 2026-11-10 at 7.39.42 AM](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/9/9/b993935a1451e7a6f9c852b356f87e5af1b35cc3.jpeg)Hi there, thanks for this. The code will not let me input?

---

<div class="post-metadata">

**Author:** ![ellacoker](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ellacoker](https://community.shopify.com/u/ellacoker)\
**Post date:** [November 9, 2026, 9:40pm UTC](https://community.shopify.com/t/button-animation/712452/7 "2026-11-09T21:40:51Z")

</div>

Thank you. I am on dawn 16.1.1

---

<div class="post-metadata">

**Author:** ![Ploqo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ploqo/32/398219_2.png) [@Ploqo](https://community.shopify.com/u/Ploqo)\
**Post date:** [November 9, 2026, 9:57pm UTC](https://community.shopify.com/t/button-animation/712452/8 "2026-11-09T21:57:00Z")

</div>

@ellacoker the file landed in the **assets** folder. It needs to sit in **sections**. The steps are the same on Dawn 16.1.1.

1. In **assets** , right-click **two-portraits-text.liquid**. Choose **Delete Permanently** , then **Delete**.

 ![Delete the file from assets](https://canada1.discourse-cdn.com/shopifyforum/original/4X/a/3/8/a384d91cf00c7f8b377390725aedc4782cb11b04.png)

1. Scroll down to the **sections** folder. Right-click it and choose **New File…**

 ![Right-click sections, New File](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/3/e/03edfecb83ba0555db0c160b03ed20a57b41829f.png)

1. Type `two-portraits-text.liquid` and press Enter.

 ![Type the file name](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/2/4/c249cc25ab6f4fe0590f86e37dafa7fcf2497b8b.png)

1. Paste the same code and click **Save**. The file now shows under **sections** and saves without the error.

 ![Saved under sections](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/2/1/5217bd15395ace602cc5119e5e37fc0e6c21e18d.png)

1. Carry on from step 5 above: **Customize** \> **Add section** \> **Two portraits + text**.

---

<div class="post-metadata">

**Author:** ![ellacoker](https://avatars.discourse-cdn.com/v4/letter/e/8491ac/32.png) [@ellacoker](https://community.shopify.com/u/ellacoker)\
**Post date:** [November 10, 2026, 8:43pm UTC](https://community.shopify.com/t/button-animation/712452/9 "2026-11-10T20:43:43Z")

</div>

> [@Ploqo](#):
>
> ```auto
> <style>
> #shopify-section-{{ section.id }} .two-portraits {
> padding-top: {{ section.settings.padding_top }}px;
> padding-bottom: {{ section.settings.padding_bottom }}px;
> }
> .two-portraits__inner {
> display: flex;
> align-items: center;
> gap: 6rem;
> }
> .two-portraits__images {
> display: flex;
> gap: 2rem;
> width: 55%;
> }
> .two-portraits__image {
> width: 50%;
> aspect-ratio: 4 / 5;
> overflow: hidden;
> }
> .two-portraits__image img,
> .two-portraits__image svg {
> width: 100%;
> height: 100%;
> object-fit: cover;
> display: block;
> }
> .two-portraits__text {
> width: 45%;
> }
> .two-portraits__text h2 {
> margin: 0 0 1.2rem;
> }
> .two-portraits__text p {
> margin: 0 0 2.4rem;
> }
> .two-portraits__link {
> color: currentColor;
> text-decoration: underline;
> text-decoration-thickness: 1px;
> text-underline-offset: 0.6rem;
> text-decoration-color: currentColor;
> transition: text-decoration-color 0.3s ease;
> }
> .two-portraits__link:hover {
> text-decoration-color: transparent;
> }
> @media screen and (max-width: 749px) {
> .two-portraits__inner {
> flex-direction: column;
> gap: 3rem;
> }
> .two-portraits__images,
> .two-portraits__text {
> width: 100%;
> }
> }
> </style>
> 
> <div class="two-portraits color-{{ section.settings.color_scheme }} gradient">
> <div class="page-width two-portraits__inner">
> <div class="two-portraits__images">
> {%- for i in (1..2) -%}
> {%- assign key = 'image_' | append: i -%}
> <div class="two-portraits__image">
> {%- if section.settings[key] != blank -%}
> {{ section.settings[key] | image_url: width: 1000 | image_tag: loading: 'lazy', widths: '300, 500, 800, 1000', sizes: '(min-width: 750px) 25vw, 50vw' }}
> {%- else -%}
> {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
> {%- endif -%}
> </div>
> {%- endfor -%}
> </div>
> <div class="two-portraits__text">
> {%- if section.settings.heading != blank -%}
> <h2 class="h2">{{ section.settings.heading | escape }}</h2>
> {%- endif -%}
> {%- if section.settings.text != blank -%}
> <p>{{ section.settings.text | escape }}</p>
> {%- endif -%}
> {%- if section.settings.button_label != blank -%}
> <a class="two-portraits__link" href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
> {%- endif -%}
> </div>
> </div>
> </div>
> 
> {% schema %}
> {
> "name": "Two portraits + text",
> "settings": [
> { "type": "image_picker", "id": "image_1", "label": "Image 1" },
> { "type": "image_picker", "id": "image_2", "label": "Image 2" },
> { "type": "text", "id": "heading", "label": "Heading", "default": "Intermission, the final chapter." },
> { "type": "text", "id": "text", "label": "Text", "default": "The moments between movement and ease." },
> { "type": "text", "id": "button_label", "label": "Button label", "default": "Your Intermission." },
> { "type": "url", "id": "button_link", "label": "Button link" },
> {
> "type": "color_scheme",
> "id": "color_scheme",
> "label": "Color scheme",
> "default": "scheme-1"
> },
> { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 },
> { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 }
> ],
> "presets": [
> { "name": "Two portraits + text" }
> ]
> }
> {% endschema %}
> 
> ```

Thank you. This worked great. One other thing - could you give me the css so that all of the buttons on my site are this same underlin effect? Thank you!

---

<div class="post-metadata">

**Author:** ![Ploqo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ploqo/32/398219_2.png) [@Ploqo](https://community.shopify.com/u/Ploqo)\
**Post date:** [November 11, 2026, 2:39am UTC](https://community.shopify.com/t/button-animation/712452/10 "2026-11-11T02:39:55Z")

</div>

Hey @ellacoker, on Dawn this goes in Theme settings, so every button on the site picks it up.

1. Open **Customize** on your Dawn theme.
2. Click the **gear icon** at the top left ( **Theme settings** ).

 ![Theme settings gear](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/4/0/f406fc7e776e389ab78510f9761baf25008d0e66.png)

1. Scroll to the bottom and open **Custom CSS**.

 ![Custom CSS](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/2/a/42a171759236817669ab3bc181e1f8e9fdd1f314.png)

1. Paste this into the box:

```css
.button,
button.shopify-payment-button__button--unbranded {
  background-color: transparent;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6rem;
  text-decoration-color: currentColor;
  transition: text-decoration-color 0.3s ease;
}
.button::before,
.button::after,
button.shopify-payment-button__button--unbranded::before,
button.shopify-payment-button__button--unbranded::after {
  display: none;
}
.button:hover,
button.shopify-payment-button__button--unbranded:hover {
  text-decoration-color: transparent;
}

```

 ![Code pasted in Custom CSS](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/0/5/30554350437047ccc67ff73786cacffd19cdd556.png)

1. Click **Save**.

 ![Save](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/a/1/ba15a187cd7e05e63efd32385fda483046312f09.png)

Your buttons now match the “Your Intermission.” link:

 ![After: Add to cart and Buy it now as underlined links](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/a/1/ca1013ca9566b28902ae3bc263d2ccc74d0db668.png)

On hover the line fades out:

 ![Hover: the underline fades on Add to cart](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/9/2/592b314a87332df16dbd60f8b6d8c43a9e9d33ac.png)

---

<div class="post-metadata">

**Author:** ![REZ\_Preorder\_Luke](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/rez_preorder_luke/32/419676_2.png) [@REZ\_Preorder\_Luke](https://community.shopify.com/u/REZ_Preorder_Luke)\
**Post date:** [November 11, 2026, 8:54am UTC](https://community.shopify.com/t/button-animation/712452/11 "2026-11-11T08:54:14Z")

</div>

One thing to check before leaving that global CSS live: in Dawn, `.button` also covers Add to cart, the Check out button in the cart drawer and on the cart page, and the Sold out state. As thin underlined text, the two buttons that actually take the money get easy to miss, especially on a phone. If Shop Pay or PayPal is your Buy it now button, it stays a solid branded button, so the product page ends up with a text link sitting next to a big coloured block.

If you want the editorial look everywhere except the purchase path, swap Ploqo’s code for this version, which skips those buttons:

```css
.button:not(.product-form__submit):not(.cart__checkout-button) {
  background-color: transparent;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6rem;
  transition: text-decoration-color 0.3s ease;
}
.button:not(.product-form__submit):not(.cart__checkout-button)::before,
.button:not(.product-form__submit):not(.cart__checkout-button)::after {
  display: none;
}
.button:not(.product-form__submit):not(.cart__checkout-button):hover {
  text-decoration-color: transparent;
}

```

Leaving Add to cart out also means a sold-out product still shows a greyed-out button, not an underlined link that looks clickable but isn’t.

With Black Friday about two weeks out, I’d test this on a copy of the theme first (Online Store \> Themes \> … \> Duplicate) and preview it on mobile before publishing.