Cara membuat Navigasi menu animasi Hover Underline HTML + CSS

muzadidil

 



HTML

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="style.css">

    <title>Menu Hover</title>

  </head>

  <body>

<ul id="menu">

  <ul>

    <center>

<li><a href="#">Beranda</a></li>

<li><a href="#">Format</a></li>

<li><a href="#">WEB</a></li>

<li><a href="#">Contcat</a></li>

<li><a href="#">FAQ</a></li>

</center>

</ul>

</ul>

</body>

</html>


CSS

body{
  margin: 0;
  padding: 0;
  background: #f1f1f1;
}
#menu{
  margin: 0;
  padding: 0;
  margin-top: 35px;
}
#menu li{
  list-style: none;
  display: inline-block;
}
#menu li a{
  text-decoration: none;
  position: relative;
  color: #313131;
  font-size: 18px;
  font-weight: 700;
  font-family: sans-serif;
  display: block;
  overflow: hidden;
  transition: 0.7s all;
  padding: 14px 30px;
  text-transform: uppercase;
}
#menu li a:before{
  content: '';
  width: 60px;
  position: absolute;
  border-bottom: 8px solid #313131;
  bottom: 0;
  right: 350px;
  transition: 0.7s all;
}
#menu li a:hover:before{
  right: 0;
}

Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar