JSFiddle - React, Tailwind, and code Playground

by Fansublogger

HTML

Ganti URL dengan URL link kamu

<div class="menuku">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>

CSS

.menuku {background:#000;width:auto;margin: 5px;}

.menuku ul {
padding:10px;
font-family:"helvetica neue", helvetica, arial, sans-serif;
font-weight:700;
line-height:1.8;
color:#fff;
padding-left:5px;
text-shadow: 0 1px 1px transparent;
float:left;}

.menuku ul li {
clear:left;
font-size:.9em;
background:-webkit-linear-gradient(0, #3FB1E7 50%, #fff 50%);
float:left;
cursor:default;
background-position:100% 0;
background-size:200% 100%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-transition:background-position .4s cubic-bezier(0,0,.5,1);
-moz-background-clip:text;
-moz-text-fill-color:transparent;
-moz-transition:background-position .4s cubic-bezier(0,0,.5,1);}

.menuku ul li:hover {
background-position:0 0;}