Create a flat, four part square menu with HTML & CSS3

09.12.2013 by Ilia Raiskin

HTML CSS

In this tutorial I'll show you how to create a flat four part square menu with CSS3 and HTML. Have fun!

HTML

I used the Kavoon font from Google Web Fonts.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Toolinfy - 4 part square menu with CSS3</title>
    <meta name="description" content="4 part square menu with CSS3" />
    <meta name="author" content="Toolinfy.com" />
    <link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="four-part-square-menu-css3.css" />
  </head>
  <body>
    <ul class="square-menu">
     <li>
       <a href="#" class="slink-x">Home</a>
     </li>
     <li>
       <a href="#" class="slink-y">About</a>
     </li>
     <li>
       <a href="#" class="slink-y">News</a>
     </li>
     <li>
       <a href="#" class="slink-x">Contact</a>
     </li>
    <br style="clear:both;"/>
    </ul>
  </body>
</html>

CSS

body {
background: #F1F1F1;
padding: 0;
margin: 0;
font-size: small;
}

ul.square-menu {
list-style-type: none;
list-style: none;
padding: 0;
font-family: "Kavoon", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
width: 380px;
margin: 40px auto;
}

ul.square-menu li{
float: left;
margin:5px;	
}

ul.square-menu li a {
display: block;
text-decoration: none;
padding: 80px 60px;
background: rgb(128, 128, 128);
color: white;
font-weight: normal;
font-size: 150%;
width: 60px;
height: 20px;
text-align: center;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}

ul.square-menu li a.slink-x {
background: rgb(238, 124, 0);
}

ul.square-menu li a.slink-y {
background: rgb(0, 92, 192);
}

ul.square-menu li a:hover {
background: rgb(48, 48, 48);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
}

With transform:scale(1.2); a navigation item is resized when you move your mouse over it.

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Create a flat, four part square menu with HTML & CSS3

HTML

CSS

About the author

Ilia Raiskin

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

Follow & Subscribe

About us

Info