---

In my recent website redesign into the Boggiverse, I spent a lot of time on the links. I wanted to make them more like buttons while still keeping the familiar look of a web link to keep things intuitive and accessible. The colors are the same and the underlines are still there. But if you hover your cursor over the links in the navigation at the top of this page, you can see some of the interactive styling! Try clicking the “Logs” link and see how it reacts.

This is what the button’s HTML looks like:

<div id="root">
  <a class="link" data-external={external} href={href} target={target}>
    <div id="box">
      <slot />
    </div>
  </a>
</div>

I’m using Astro to make it a generic component, which is why the attributes are in curly braces and there’s a <slot /> for the label.

Here is what the styling looks like:

#root {
    display: flex;
}

.link[data-external="true"] {
    ::after {
        content: "➤";
    }
}

.link[data-external="true"]:hover {
    box-shadow: inset 0 0 10px orange, 0 0 10px orange;
}

.link {
    padding: 0.25rem;
    border-radius: 0.5rem;
    border-color: rgba(23, 14, 55, 0.132);
    border-style: solid;
    border-width: 0 0.2rem;
    margin: 0.2rem 0;
    transition-duration: 0.1s;
    transition-property: transform, padding-left, padding-right, border-radius;
    transition-timing-function: cubic-bezier(0, 1, 1, 1.5);
    display: flex;
    background-color: transparent;

    #box {
        transition: 0.1s cubic-bezier(0, 1, 1, 1.5);
    }
}

.link:hover {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 0;
    border-width: 0.2rem;
    border-radius: 0;
    border-color: white;
    background-color: #a7afd844;
    box-shadow: inset 0 0 10px aqua, 0 0 10px aqua;
    text-shadow: 0 0 5px white;

    #box {
        transform: scale(1, 1.2);
    }
}

.link:active {
    transform: translateY(0.2rem);
    background-color: white;

    #box {
        transform: scale(0.9, 0.99);
    }
}

#box {
    pointer-events: none;
    display: flex;
    flex-wrap: nowrap;
}