[Support request] link hover effect

Home Forums Support [Support request] link hover effect

Home Forums Support link hover effect

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #943578
    Nele

    Hi there,

    I found this really cool hover effect for links:
    https://css-tricks.com/having-fun-with-link-hover-effects/

    `:root {
    –mainColor: #ff9800;
    }

    body {
    align-items: center;
    display: flex;
    font-family: ‘Montserrat’, sans-serif;
    font-size: 2em;
    height: 100vh;
    justify-content: center;
    }

    a {
    background: linear-gradient(to bottom, var(–mainColor) 0%, var(–mainColor) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
    color: #000;
    text-decoration: none;
    }

    a:hover {
    background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg id=’squiggle-link’ xmlns=’http://www.w3.org/2000/svg’ xmlns:xlink=’http://www.w3.org/1999/xlink’ xmlns:ev=’http://www.w3.org/2001/xml-events’ viewBox=’0 0 20 4’%3E%3Cstyle type=’text/css’%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill=’none’ stroke=’%23ff9800′ stroke-width=’2′ class=’squiggle’ d=’M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3’/%3E%3C/svg%3E”);
    background-position: 0 100%;
    background-size: auto 6px;
    background-repeat: repeat-x;
    text-decoration: none;
    }

    but when I try to put is in the custom CSS panel my website ‘breaks in two’.
    my header goes to the left half of my screen, the content underneath moves to the right upper half. Words split,…Either way, it looks not as good as I’d hoped. Is there a way to use something like this without the breaking :-)?

    kind regards
    Nele

    #943627
    David
    Staff
    Customer Support

    Hi there,

    you need to remove this part of the CSS:

    body {
      align-items: center;
      display: flex;
      font-family: 'Montserrat', sans-serif;
      font-size: 2em;
      height: 100vh;
      justify-content: center;
    }

    The rest of the code will try and target every <a> tag on the page where it can so you may need to make this more specific.

    #943640
    Nele

    Hi there David,

    yay! thank you so much 🙂

    #943646
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.