Navigation Hover Effect Pure CSS

1990 Andev.web

Open In Editor Video 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

HTML CSS Event Registration System Website

Neon Hover Button

Ecommerce Website Template HTML CSS

HTML

CSS

JS

Recommended

HTML CSS Event Registration System Website

Neon Hover Button

Ecommerce Website Template HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS