CSS3 Blue Icon Menu

March 15, 2013 Freebies, Tutorials

This versatile toolbar is built entirely using CSS3 and can double as a menu or even be used as a single button. The icons used are from the Font Awesome icon font giving the menu 249 different button possibilities. Since it uses CSS3 and a font for the icons, it is mobile and retina display ready.

The Markup

The markup uses an unordered list with the class of toolbar. The i tags are used for the icons, and the classes follow the Font Awesome classes.


<ul class="toolbar">
	<li><a href="#"><i class="icon-home"></i></a></li>
	<li><a href="#"><i class="icon-heart-empty"></i></a></li>
	<li><a href="#"><i class="icon-comments-alt"></i></a></li>
	<li><a href="#"><i class="icon-cloud"></i></a></li>
</ul>

The CSS

This CSS is larger than one may think simply because of the all of the gradients. I added a lot of legacy support for gradients, which may be overkill and supports more browsers than I usually do, but I did it for wider use. I also used the BootsrapCDN to serve up both the Font Awesome icon font and the necessary styles. You can also use services like Fontello to choose from several icon libraries and create your own icon fonts with only your desired icons.

 
.toolbar {
	margin: 0 auto;
	width:280px;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(64,100,138,.3), 0 2px 4px #3b5c7f, 0 12px 18px rgba(64,100,138,.4);
}
.toolbar li {
	float:left;
	list-style: none;
	width: 25%;
}
.toolbar a{
	background: #f4f7f9;
	background: -moz-linear-gradient(top, #f4f7f9 0%, #f7fafd 4%, #ecf2f7 30%, #e4ebf3 68%, #dce4ee 89%, #d5e0eb 92%, #c7d3e0 96%, #c6d2df 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f7f9), color-stop(4%,#f7fafd), color-stop(30%,#ecf2f7), color-stop(68%,#e4ebf3), color-stop(89%,#dce4ee), color-stop(92%,#d5e0eb), color-stop(96%,#c7d3e0), color-stop(100%,#c6d2df));
	background: -webkit-linear-gradient(top, #f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background: -o-linear-gradient(top, #f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background: -ms-linear-gradient(top, #f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	background: linear-gradient(to bottom, #f4f7f9 0%,#f7fafd 4%,#ecf2f7 30%,#e4ebf3 68%,#dce4ee 89%,#d5e0eb 92%,#c7d3e0 96%,#c6d2df 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f9', endColorstr='#c6d2df',GradientType=0 );
	border-left: 1px solid rgba(79,123,170,.4);
	border-right: 1px solid rgba(255,255,255,.3);
	color: #40648a;
	display: block;
	font-size: 27px;
	height: 54px;
	line-height: 57px;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
}
	.toolbar li:first-child a {
		border-left: none;
		border-radius:4px 0 0 4px
	}
	.toolbar li:last-child a {
		border-right: none;
		border-radius:0 4px 4px 0
	}
	.toolbar a:hover {
		background: #aac5e0;
		background: -moz-linear-gradient(top, #aac5e0 0%, #adc8e4 4%, #a2c0de 30%, #9ab9da 68%, #92b2d5 89%, #8baed2 92%, #7da1c7 96%, #7ca0c6 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aac5e0), color-stop(4%,#adc8e4), color-stop(30%,#a2c0de), color-stop(68%,#9ab9da), color-stop(89%,#92b2d5), color-stop(92%,#8baed2), color-stop(96%,#7da1c7), color-stop(100%,#7ca0c6));
		background: -webkit-linear-gradient(top, #aac5e0 0%,#adc8e4 4%,#a2c0de 30%,#9ab9da 68%,#92b2d5 89%,#8baed2 92%,#7da1c7 96%,#7ca0c6 100%);
		background: -o-linear-gradient(top, #aac5e0 0%,#adc8e4 4%,#a2c0de 30%,#9ab9da 68%,#92b2d5 89%,#8baed2 92%,#7da1c7 96%,#7ca0c6 100%);
		background: -ms-linear-gradient(top, #aac5e0 0%,#adc8e4 4%,#a2c0de 30%,#9ab9da 68%,#92b2d5 89%,#8baed2 92%,#7da1c7 96%,#7ca0c6 100%);
		background: linear-gradient(to bottom, #aac5e0 0%,#adc8e4 4%,#a2c0de 30%,#9ab9da 68%,#92b2d5 89%,#8baed2 92%,#7da1c7 96%,#7ca0c6 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aac5e0', endColorstr='#7ca0c6',GradientType=0 );
		color: #fff;
		text-shadow: 0 1px 0 #40648a;
	}
	.toolbar a:active{
		background: #8aafd5;
		background: -moz-linear-gradient(top, #8aafd5 0%, #8db2d9 4%, #82aad3 30%, #7aa3cf 68%, #729cca 89%, #6b98c7 92%, #5d8bbc 96%, #5c8abb 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8aafd5), color-stop(4%,#8db2d9), color-stop(30%,#82aad3), color-stop(68%,#7aa3cf), color-stop(89%,#729cca), color-stop(92%,#6b98c7), color-stop(96%,#5d8bbc), color-stop(100%,#5c8abb));
		background: -webkit-linear-gradient(top, #8aafd5 0%,#8db2d9 4%,#82aad3 30%,#7aa3cf 68%,#729cca 89%,#6b98c7 92%,#5d8bbc 96%,#5c8abb 100%);
		background: -o-linear-gradient(top, #8aafd5 0%,#8db2d9 4%,#82aad3 30%,#7aa3cf 68%,#729cca 89%,#6b98c7 92%,#5d8bbc 96%,#5c8abb 100%);
		background: -ms-linear-gradient(top, #8aafd5 0%,#8db2d9 4%,#82aad3 30%,#7aa3cf 68%,#729cca 89%,#6b98c7 92%,#5d8bbc 96%,#5c8abb 100%);
		background: linear-gradient(to bottom, #8aafd5 0%,#8db2d9 4%,#82aad3 30%,#7aa3cf 68%,#729cca 89%,#6b98c7 92%,#5d8bbc 96%,#5c8abb 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8aafd5', endColorstr='#5c8abb',GradientType=0 );
		box-shadow: 0 2px 3px rgba(0,0,0,.3) inset;
		text-shadow: 0 -1px 0 #40648a;
	}

Extending The Menu

In this example, I set a specific width, but since it is all CSS, you can change the width or even make it fluid. You can add or remove as many buttons as you’d like to make it your own. To make it even more your own, change up the icons to what you need using the other 245 icons Font Awesome offers.

Let us know where and how you’re using the menu below in the comments or via twitter.

Comments

  • MAIL

    Simple and attractive menu in pure css form. But I don think that this child pattern in css will work in IE old versions.

    http://www.freemenu.info/2013/05/js-menu.html

    • cameronbaney

      Thank you. Yes, I suggest using classes on the li elements instead of the child selectors if you need older IE support.

      • MAIL

        Your demo is good and there is no need of child of LI. When it comes to drop down menu or tree structure, i don’t think the LI child class will be good. Hope matter clear.

        htpp://www.freemenu.info/2013/04/menu101.html