Fun link styling


by Jeremy Caudle
code

While checking out the Field Notes website to see if the 50th edition had gone on sale yet, I noticed a fun bit of styling they did on a link within their dispatches page. Their version made use of an SVG, but I went with an HTML entity within my version. It's a nice little effect. Their team did a great job.

Another Jeremy that I recommend following on the web is the great Jeremy Keith→.

View the code:

HTML and JS 
<section class="code-block">

            <p>Another Jeremy that I recommend following on the web is the great <a href="https://adactio.com"><span>Jeremy Keith<span>→</span></a>.</p>

        </section>
CSS 
section.code-block {
            background-image: linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 166, 0, 0.1));
            text-align: center;
            width: clamp(16em, 90vw, 75ch);
            font-family: Helvetica, Arial, sans-serif;
            padding: 2rem;
            margin: 3rem auto;
        }

        section.code-block a {
            text-decoration: none;
						color: blue;
        }

        section.code-block a span {
            display: inline-block;
            position: relative;
        }

        section.code-block a span > span {
            position: absolute;
            transition: transform .125s ease-out, opacity .125s ease-out;
            opacity: 0;
            width:2ch;
            right:-2ch;
            transform: translateX(-3ch) scale(.5);
        }

        section.code-block a span:hover > span {
            transform: translateX(.5ch) scale(1);
            opacity: 1;
            display: inline;
        }

Tags