Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to create glowing hyperlinks?

Similar to the ones in this game: https://kittyhorrorshow.itch.io/hornets

I've tried using online CSS guides. And I also opened Hornets in Twine 1 and copied the stylesheet over, trying with both the Harlowe and Sugarcube story formats in Twine 2, but no luck.

I'm using Harlowe, but could switch story format if I need to.

Apologies if this is a dumb question - I'm new to Twine.

Comments

  • The following page shows how to achieve the sort of effect you are looking for:- https://www.sitepoint.com/css3-glowing-link-effect/

    Here is a snippet of css from a game I am developing using Harlowe that uses green neon glowing hyperlinks:-
    tw-link {
      color:#B6FF00;
      font-weight:normal;
    	-webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
    }
    
    tw-link:hover {
      text-decoration:none;
      color:#B6FF00;
      font-weight:normal;
      padding-left: 0;
    	-webkit-animation: neon 1.5s ease-in-out infinite alternate;
      -moz-animation: neon 1.5s ease-in-out infinite alternate;
      animation: neon2 1.5s ease-in-out infinite alternate;
    }
    
    tw-link:active {
    	color:#B6FF00;
      border-bottom: 0;
    	-webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
    }
    
    @-webkit-keyframes neon {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
      }
      to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
      }
    }
    
    @-moz-keyframes neon {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
      }
      to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
      }
    }
    
    @keyframes neon {
      from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
      }
      to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
      }
    }
    

    Bear in mind this is for light green link text on a black background. Don't ask me how it works because I don't entirely understand it yet. I'm a css2 veteran but certain css3 stuff like keyframes and animations are new to me. It is modified css3 code from another website.
Sign In or Register to comment.