How to display underline animation on button image hover?

harukajmickey
Shopify Partner
119 0 9

Hi here is the button I coded.

https://k41qdbx52ltq4oeh-57309069474.shopifypreview.com

 

When the mouse is hovered on the text, the underline animation shows, but not the button image.

How do you show the underline animation when the mouse is hovered on the image?

 

Thank you in adavance!

 

 

          <div class="flex justify-center mt-10 md:mt-16">
                <a class="read-more_btn text-lg md:text-xl hover:opacity-70" href="/blogs/news"><span class="underline">もっと読む</span></a>
            </div>

<style>
.read-more_btn:after {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  background-image: url('{{ ' arrow-btn.svg' | file_url }}');
  background-size: contain;
  vertical-align: middle;
  margin-left: 16px;
}

.underline {
  padding-bottom: 5px;
  position: relative;
}

.underline::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.underline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent;
  /* Activeなページに対してhover時に下線を無効にする */
}
</style>

 スクリーンショット 2023-10-24 17.44.16.png

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7726 1504 1511

Please try to change those code 

.underline {
  padding-bottom: 5px;
  position: relative;
}

.underline::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.underline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent;
  /* Activeなページに対してhover時に下線を無効にする */
}

To this 

.read-more_btn {
  padding-bottom: 5px;
  position: relative;
}

.read-more_btn::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}

.read-more_btn:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent;
  /* Activeなページに対してhover時に下線を無効にする */
}

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

harukajmickey
Shopify Partner
119 0 9

@Dan-From-Ryviu 

Thank you.

When I typed the code, the button looks like this.

I don't want the underline underneath the button image, only the text. 

 

https://www.awesomescreenshot.com/video/21857173?key=d47726ff96b9d5793987ac75701103ba