Navigation Hover Effect Pure CSS

Open In Editor Publish Your Code

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}
ul li {
    list-style: none;
}
ul li a {
    position: relative;
    display: block;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-size: 6.5em;
    font-weight: 900;
    text-decoration: none;
    line-height: 1.2em;
}
ul li a:hover {
    color: #f4f400;
    -webkit-text-stroke: 1px #000;
    transition: 0.5s;
}

ul li a:before,
ul li a:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
  transition: 0.5s;}

ul li a:hover:before {
    color: #f00;
    z-index: 1;
    -webkit-text-stroke: 1px #000;
    transform: translate(10px,-10px);
}
ul li a:hover:after {
    color: #0ff;
    z-index: 2;
    -webkit-text-stroke: 1px #000;
    transform: translate(20px,-20px);
}

Navigation Hover Effect Pure CSS

Recommended

Text Scramble Effect

CSS Animated Loading Screen with Code Effect

CSS Ribbon

HTML

CSS

JS

Recommended

Text Scramble Effect

CSS Animated Loading Screen with Code Effect

CSS Ribbon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS