Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>

<div class="menu">
        <a href="#">
            <span class="outter">
                <span class="inner">HOME</span>
            </span>
        </a>
        <a href="#">
            <span class="outter">
                <span class="inner">PHOTOGRAPHY</span>
            </span>
        </a>
        <a href="#">
            <span class="outter">
                <span class="inner">PORTFOLIO</span>
            </span>
        </a>
        <a href="#">
            <span class="outter">
                <span class="inner">CONTACT</span>
            </span>
        </a>
    </div>

</header>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
//******************************************************
// like it if you ❤️ it :) Thank you 🤘🤘🤘

// Fullscreen: https://codepen.io/nocni_sovac/full/vYwOXpy
//******************************************************

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap");

* {
    padding: 0;
    margin: 0;
    letter-spacing: 3px;
}

body {
    background: #0c0b0b;
    width: 99%;
    height: 100vh;
    overflow: hidden;
    font-family: "Roboto Condensed", sans-serif;
    display: grid;
    place-items: center;
}

header {
    // width: 100%;
    height: 3rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fffae1;
    padding: 1.5rem 1rem;

.menu {
        display: flex;

a {
            text-decoration: none;
            margin: 0 1rem;
            color: #fffae1;
            position: relative;
            display: block;
            z-index: 999;
						font-size: 20px;

.outter {
                &::before {
                    content: "";
                    background: #fffae1;
                    position: absolute;
                    height: 1px;
                    width: calc(100% + 12px);
                    top: 0;
                    left: 0;
                    left: -8px;
                    transform: scale(0);
                    transform-origin: left;
                    transition: 0.6s ease;
                }

&::after {
                    content: "";
                    background: #fffae1;
                    position: absolute;
                    height: 1px;
                    width: calc(100% + 12px);
                    bottom: 0;
                    left: -8px;
                    transform: scale(0);
                    transform-origin: right;
                    transition: 0.6s ease;
                }
            }

.inner {
                &::before {
                    content: "";
                    background: #fffae1;
                    position: absolute;
                    width: 1px;
                    height: calc(100% + 10px);
                    top: -5px;
                    left: -2px;
                    transform: scale(0);
                    transform-origin: bottom;
                    transition: 0.6s ease;
                }

&::after {
                    content: "";
                    background: #fffae1;
                    position: absolute;
                    width: 1px;
                    height: calc(100% + 10px);
                    top: -5px;
                    right: 0px;
                    transform: scale(0);
                    transform-origin: top;
                    transition: 0.6s ease;
                }
            }

&:hover {
                span {
                    &::before {
                        transform: scale(1);
                    }
                    &::after {
                        transform: scale(1);
                    }
                }
            }
        }
    }
}

.cursor {
    width: 100px;
    height: 100px;
    border: 1px solid #fffae1;
    border-radius: 50%;
    position: absolute;
    transition: 0.1s ease;
    z-index: -2;
    opacity: 1;
	top: -100px;
	left:-100px;
}

.cursor-fade {
    transition: 0.5s ease;
    transform: scale(2);
    filter: url(#filth);
    opacity: 0;
	
}

Frontend Forever App