Create a flat bubble navigation with HTML & CSS3

08.24.2013 by Ilia Raiskin

HTML CSS

In this tutorial I'm going to show you how to create a flat bubble navigation with HTML and CSS3.

HTML for Google Web Fonts

We use the font Montserrat from Google Web Fonts. Add this code in the <head>-tag of your page.

<link href='http://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet' type='text/css'>

HTML

<div class="bubble-menu">
<ul>
<li>
	<a href="#">Home</a>
</li>	
<li>
	<a href="#">About</a>
</li>	
<li>
	<a href="#">News</a>
</li>	
<li>
	<a href="#">Downloads</a>
</li>	
<li>
	<a href="#">Contact</a>
</li>	
</ul>
</div>

CSS

body {
padding: 0;
margin: 0;
background: #F3F3F3;
}

.bubble-menu {
-webkit-font-smoothing: antialiased;
}

.bubble-menu ul {
list-style: none;
list-style-type: none;
padding: 0;
padding-bottom: 10px;
margin: 0 auto;
overflow: auto;
width: 705px;
}

.bubble-menu li {
float: left;
margin-right: -10px;
margin-top: -50px;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.bubble-menu li:hover {
margin-top: 0px;
}

.bubble-menu li a {
background: rgba(0, 149, 187, 0.75);
font-family: "Montserrat", sans-serif;
font-size: 90%;
text-decoration: none;
color: white;
font-weight: normal;
text-align: center;
display: block;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
width: 80px;
height: 40px;
padding: 75px 30px 25px 30px;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-moz-box-shadow: 0px 2px 0px 2px rgba(0, 0, 0, 0.04);
-webkit-box-shadow: 0px 2px 0px 2px rgba(0, 0, 0, 0.04);
box-shadow: 0px 2px 0px 2px rgba(0, 0, 0, 0.04);
}

.bubble-menu li:hover a {
padding: 60px 30px 40px 30px;
}

As you can see, we use CSS3 transitions for the animations and border-radius:100%; to create the circles.

About the author

Ilia Raiskin

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

Create a flat bubble navigation with HTML & CSS3

HTML for Google Web Fonts

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