How to create glowing hyperlinks?

matthewmoon · January 2017

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.

nyarlathotep · January 2017

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.

Howdy, Stranger!

Categories

How to create glowing hyperlinks?

Comments