New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap button animation issue #1820

Closed
Kulbhushan-Chand opened this Issue Sep 5, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@Kulbhushan-Chand

Kulbhushan-Chand commented Sep 5, 2018

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 -
issue

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 5, 2018

Owner

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.

image

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.

Owner

mmistakes commented Sep 5, 2018

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.

image

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 5, 2018

Owner

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

Owner

mmistakes commented Sep 5, 2018

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 5, 2018

Owner

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.

Owner

mmistakes commented Sep 5, 2018

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 5, 2018

Owner

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

Owner

mmistakes commented Sep 5, 2018

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

@mmistakes mmistakes closed this in 192c22a Sep 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment