Animate underline for (1) one hyperlink and (2) all hyperlinks

[ratalo]

Hello,

I like the underline that I have in my menu. I tried to animate a button in a similar manner, but nothing works.

Could you please provide custom CSS to try for two options?

(1) animation for one hyperlink

(2) animation for all hyperlinks

Thank you.

[ratalo]

Images didn’t work. Trying again:

[ratalo]

OK so excuse me for the mess, but this thing doesn’t play gifs or I don’t know how to do it, The animation is here: https://ibb.co/61p23Mz

[SeaTheme]

Hi,
1) You need to add a link, please add class name custom_link to the link, like <a href="xxx" class="custom_link">Text</a>, the custom CSS is:

a.custom_link {
 position: relative;
}
a.custom_link:before{
   content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
a.custom_link:hover:before{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}

2)
the custom CSS is:

.entry a,.widget-container a {
 position: relative;
}
.entry a:before, .widget-container a:before{
   content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
 .entry a:before,.widget-container a:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}

The custom CSS is not for the whole website, it is for the content area(.entry a) and sidebar(.widget-container a). The global CSS would affect unknown issue. If you want to add some other places, please point it.

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[ratalo]

Hey,

Thanks. You guys are so supportive. I appreciate your help.

Your code worked but the underline appears from the center. I’m looking for something different. I have 2 thinks I’d like to ask for:

A.) Could we modify code no. 1 so that the underline goes from left to right, please? Example:

B.) Could we adjust the code no. 1 for hyperlink underline in the menu so that the animation is the same? Right now, I have this effect below.

Problem: afer the animation finishes, the underline loses width by a half.

I’d really be thankful for your help. The theme is sweet.

[ratalo]

Again, I didn’t link the image for A properly. Here it is:

[SeaTheme]

Hi,

The custom CSS should work from left to right. Please leave your web page. I will check the lived page. thanks

Besta

[ratalo]

This reply has been marked as private.

[ratalo]

This reply has been marked as private.

[SeaTheme]

Hi,

Please try to add the custom CSS:

a.custom_link:before {
 transition: all 0.5s;
-webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
transform-origin: 0 100%;
}

The animation is not changed to 1px when hover on my browser. Could you paste a screencast video?

Best

[ratalo]

1.

Hi,

Please try to add the custom CSS:

a.custom_link:before {
transition: all 0.5s;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
}

Doesn’t work at all. The only code that’s doing something decent is this custom that I’ve found online:

/* Button hover custom link B */

a.custom_link {
position: relative;
display: inline-block !important;
line-height: 1.6 !important;
}
a.custom_link:before{
content: ”;
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background-color: #77CDAF;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
a.custom_link:hover:before{
visibility: visible;
width: 100%;
}

# # #

2.

Problem with the menu link underline losing height appears on: (desktop, no extensions) Chrome, Vivaldi, Brave, Firefox. Preview:

[ratalo]

AD 2

The problematic class in question is: gallery-link-a. The effect of the underline being thinned is the same if you assign the class to any link.

[SeaTheme]

Hi,

I tested the CSS on your HTML page. There may be caused by other reasons.
I need to check the lived webpage. It is hard to find the reason only by description.
I will check the website directly if your website is lived, is ok?

Best

[ratalo]

This reply has been marked as private.

[ratalo]

I found a code that provides the exact animation we’d be looking for:

a.custom_link {
display: inline;
position: relative;
overflow: hidden;
text-decoration: none !mportant;
}
a.custom_link:after {
content: “”;
text-decoration: none;
position: absolute;
right: 0;
width: 0;
bottom: -2px;
background: #6acebb;
height: 2px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
a.custom_link:hover:after,
a.custom_link:focus:after,
a.custom_link:active:after {
left: 0;
right: auto;
width: 100%;
}

Works with buttons – you’ll see it live on the page. The question is – how can we apply that to the menu?

[SeaTheme]

This reply has been marked as private.

[ratalo]

Hey,

1. Link underline in Menu problem

Fixed by a miracle. Thank you.

2. Link underline for custom button

I’ll use the codes provided here later. For now, I just changed the style of it not to be bothered too much. Thanks again.

I think I have everything here.

[Author]

Posts