- Get link
- Other Apps
Source Code:
1) Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Navigation Menu Line Effect</title>
</head>
<body>
<ul class="nav"><br><br><br><br><br><br>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
2) Style.css
@charset "utf-8";
/* CSS Document */
body{
background:#000;
margin:0px;
padding:0px;
}
.nav{
font-family:Verdana, Geneva, sans-serif;
text-align:center;
text-transform:capitalize;
letter-spacing:2px;
}
.nav *{
box-sizing:border-box;
transition:all 0.35s ease;
}
.nav li{
display:inline-block;
list-style:outside none none;
margin:.5em 1em;
padding:0;
}
.nav a{
padding:.5em 0.8em;
color:#F00;
position:relative;
text-decoration:none;
font-size:1.2em;
}
.nav a:before,.nav a:after{
height:14px;
width:14px;
position:absolute;
content:'';
transition:all 0.35s ease;
opacity:0;
}
.nav a:before{
right:0;
top:0;
border-right:solid 3px #FFF;
border-top:solid 3px #FFF;
border-radius:3px;
transform:translate(-100%,50%);
}
.nav a:after{
left:0;
bottom:0;
border-left:solid 3px #FFF;
border-bottom:solid 3px #FFF;
border-radius:3px;
transform:translate(-100%,50%);
}
a:hover:before,a:hover:after{
transform:translate(0%,0%);
opacity:1;
}
Output:
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.