Bootstrap button animation issue

[kulbhushanchand]

Issue : -

Bootstap button animation not working when linking to external links? However it works on relative links?

Markdown Code in a page -

[Install the Theme]({{ "/docs/quick-start-guide/" | relative_url }}){: .btn .btn--success .btn--large}

[Hello](https://www.google.com){: .btn .btn--success .btn--large}

Result -

PS: - On a side-note, if anyone wondering how I made the gif?
Here is the process -

• Installed chrome extension to recode screen as *.webm
• Used online service to convert *.webm to *.gif
• Used another online service to crop *.gif

If anyone have a simple process to make gif from desktop/chrome screen, please share...

[mmistakes]

As far as I can tell there's some JavaScript screwing with links, e.g. <a></a> elements.

It's more noticeable in Firefox where the :hover animation triggers for a second then gets interrupted. You can see it on plain text links too.

Checking the web inspector and all <a> elements have a click event added to them as part of the smoothScroll script. I'm not entirely sure why it's messing with the hover state or how to fix it, but this looks to be the issue.

If there's any JavaScript mavens out there that want to take a stab PR's are welcome.

[mmistakes]

Scratch that. Disabling JavaScript and the issue is still there. Must be some quirk in the CSS I'm not immediately noticing.

[mmistakes]

Figured it out and this will likely come down to preferance.
The theme is styling plain text links with a :visited state as slightly darker to indicated you've already visited them.

The button's follow the same logic only the color I used for the :visited state is the same as the :active one. So that's why you don't see a hover change because you've already visited google.com. Change that link to a page you've never been to and you'll see the hover.

[mmistakes]

Also adding the :hover styles after :visited fixes the issue, which I'll be pushing in a minute.