making blinkies without images (css only)

[goat]

if you ever wanted that sort of thing i mean :3

Code

<style>

@font-face {
font-family: soopa;
src: url("https://file.garden/aMuL0oRhjDKbkUNC/soopafre.ttf") format("truetype");
}

.goatbutton {
text-align: center;
width:150px;
height:30px;
color:black !important;
text-shadow:1px 2px beige;
background-color:darkblue;
font-family: "soopa";
font-size:20px;
animation: goat-blinkie 1s infinite; }

.goatbutton a {
color:black !important;
text-shadow:1px 2px beige; }

.goatbutton a:hover {
color:purple !important;
text-shadow:1px 2px limegreen; }

@keyframes goat-blinkie {

0% { border: 2px dotted pink; }

25% { border: 2px dashed blue; }

50% { border: 2px dotted lightpink; }

75% { border: 2px dashed limegreen; }

100% { border: 2px solid yellow; }
}
</style>

<div class="goatbutton"><a href="https://blog.spacehey.com/subscribe?id=3377814">G O A T <3</a></div>

obviously you can edit all the goat stuff out and switch it up to however u want it :D

also: original blog post over @ spacehey.com

xoxo

[Dan Q]

That's really nice; thank you for sharing!

I've got a slight optimisation to suggest, but it's not a big change:

Code

<style>
  @font-face {
    font-family: soopa;
    src: url("https://file.garden/aMuL0oRhjDKbkUNC/soopafre.ttf") format("truetype");
  }

  .goatbutton {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    width: 150px;
    height: 30px;
    background-color: darkblue;
    font-family: "soopa", sans-serif;
    font-size: 20px;
    animation: goat-blinkie 1s infinite;
    color: black;
    text-shadow: 1px 2px beige;
    text-decoration: none;

    &:hover {
      color: purple;
      text-shadow: 1px 2px limegreen;
    }
  }

  @keyframes goat-blinkie {
      0% { border: 2px dotted pink; }
     25% { border: 2px dashed blue; }
     50% { border: 2px dotted lightpink; }
     75% { border: 2px dashed limegreen; }
    100% { border: 2px solid yellow; }
  }
</style>

<a class="goatbutton" href="https://blog.spacehey.com/subscribe?id=3377814">G O A T <3</a>

Here's what I changed:

1. Instead of a <div> with a <a> inside it, now the whole thing is just an <a>. This means the user can click anywhere on the blinkie and the link words (not just on the words), and the hover effect is applied when you hover anywhere on it. Plus, it means hover effects can apply to the blinkie itself e.g. you could switch the animation on hover if you wanted. The code's simpler, too.

2. I've set display: to inline-block. This makes the whole block act "more like" an image, e.g. if you put two of them on a line they won't appear below one another. It can be switched back to block if you prefer the old behaviour.

3. I've set a fallback font of sans-serif. If "soopa" fails to load, it'll now use a default sans-serif font instead of the browser's default (which is often a serif font).

4. I've set box-sizing: border-box; to constrain the size exactly. Browser defaults specify box-sizing: content-box; You might be overriding this site-wide anyway, so it might not matter! But if not, this is important because it ensures that the blinkie remains exactly 150px × 30px, as you'd expect, instead of being 4px wider and 4px taller because of the borders. This means it's now easier to change the thickness of the borders (even between keyframes!), if you like, and it doesn't resize the whole thing.

5. I've removed duplication of the color: and stopped it being !important. The !important is probably not needed so long as we specify the link as "a.goatbutton", because any root stylesheet probably just says a { ... }. Removing the !important saves it for later in case we really need it!

6. I've nested the :hover directive. I just think this is prettier code, but maybe I'm opinionated! It also helps ensure that the instructions of "how the blinkie looks" and "how the blinkie looks when it's hovered" can't be "separated" from one another when you paste some new code into your stylesheet!

7. I added text-decoration: none to remove the default underline that hyperlinks get.

Hope that's all okay!

This is a really, really cool use of HTML + CSS to do the kind of thing for which most people would reach for an image, and I think that's just fantastic. Thanks again for sharing!

[goat]

Code

&:hover

lol i always forget about that XDD

i'm just so used to starting new sections of css for links or whatever :3

also: ig i should rly start using serifs as a fallback (even if i DO think they're boring!) XDD