Showing posts with label Menu Hover Style Using HTML5 and CSS3. Show all posts
Showing posts with label Menu Hover Style Using HTML5 and CSS3. Show all posts

Menu Hover Style Using HTML5 and CSS3

Creating a Menu Hover style with HTML5 and CSS3.

HTML

 <html>
<head>
    <title>This is Menu</title>
    <link rel="stylesheet" type="text/css" href="menu.css">
    </head>
    <body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
   
    </body>
</html>

CSS 

body{
    margin: 0px;
    padding: 0px;
    font-family: serif;
}
ul {
    position: absolute;
    top: 50%;
    left: 50%;
    display:flex;
    transform: translate(-50%,-50%)
}
li{
    list-style: none;
}

a {
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;
    margin: 0 25px;
    color:#252625;
    font-size: 30px;
    text-transform: uppercase;
    transition: .5s;
    padding: 5px 10px;
   
}
a:before{
    content: "";
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ffc107;
    border-width: 0 0 3px 3px;
    transition: .5s;
    opacity: 0;
}
a:after{
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ffc107;
    border-width: 3px 3px 0 0;
    transition: .5s;
    opacity: 0;
}
a:hover{
    color: #fff;
    background-color: #ffc107
}

a:hover:before{
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
a:hover:after{
    top: -8px;
    right: -8px;
    opacity: 1;
}