Get a free trial // Grow your CSS skills // Land your dream job

Spinny Leaf Menu

Last updated on:
  <ul class="top-menu">
    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
    <li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
nav {
	width: 960px;
	height: 100px;
	margin: 120px auto;
	text-align: center;
.top-menu li {
	display: inline-block;
	text-align: center;
	margin: 30px 5px;
	position: relative;
	-webkit-transition: all 0.3s ease; 
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
.top-menu li:hover {
	margin: 30px 20px; 
.top-menu li:active {
	margin: 30px 33px; 
.top-menu li a  {
	width: 100px;
	height: 100px;
	z-index: 9999;
	position: absolute;
	top: 35px;
	font-weight: bold;
	display: block;
	text-decoration: none;
	font-size: 20px;
	color: #fff;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
	-webkit-transition: all 0.1s linear; 
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
.top-menu li:active a {
	font-size: 26px;
	top: 30px;
	text-shadow: none;
.top-menu li {	
	width: 100px;
	height: 100px;
	display: block;
	-webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-border-top-left-radius: 100px; 
	-webkit-border-bottom-right-radius: 100px; 
	-moz-border-radius-topleft: 100px; 
	-moz-border-radius-bottomright: 100px; 
	border-top-left-radius: 100px; 
	border-bottom-right-radius: 100px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
.top-menu li:hover{ 
	-webkit-border-top-left-radius: 80px; 
	-webkit-border-bottom-right-radius: 80px; 
	-moz-border-radius-topleft: 80px; 
	-moz-border-radius-bottomright: 80px; 
	border-top-left-radius: 80px; 
	border-bottom-right-radius: 80px; 
		-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-o-transform: rotate(225deg);
.top-menu li:active{ 
	-webkit-border-top-left-radius: 50px; 
	-webkit-border-bottom-right-radius: 50px; 
	-moz-border-radius-topleft: 50px; 
	-moz-border-radius-bottomright: 50px; 
	border-top-left-radius: 50px; 
	border-bottom-right-radius: 50px; 

#home { background: #41D05F; }
#cataloge { background: #E42B2B; }
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }

Reference URL


  1. Chris
    Permalink to comment#

    That’s pretty cleaver but me been me i like to find bugs and indeed i found one, if you hover your mouse close enough to the edge of the leaf the transition goes nuts and you get this kind of unexpected but cool looking 3D warp. Other then that it works very well :D

  2. Ahmad Awais
    Permalink to comment#

    That is awesome man Gona use it some where ! Just wow ..Users will keep on playing with it !

  3. sonusmac
    Permalink to comment#

    This is really amazing thanks.. Ahmad is right users will keep on playing with it.. as I was playing for minutes!!

  4. Bipin
    Permalink to comment#

    This intresting article.then thank u……this very clearly understand with my knowledge…

  5. wahid
    Permalink to comment#

    Its awesome man!!

  6. Ben
    Permalink to comment#

    My screen flickers black at the end of each transition.

    Does anybody else get this issue? (Chrome 12.0.742.122)

    • Blake
      Permalink to comment#

      yep. thought i was blinking involuntarily or something.

    • Robbie
      Permalink to comment#

      I get the same exact problem for all CSS transitions, on any site, when I’m using Chrome.

  7. dave
    Permalink to comment#

    Very cool! must find a place to use this.

    @Ben: With the exact same version of Chrome, I don’t get the flicker you mentioned.

  8. Ly
    Permalink to comment#

    This is very cool !

  9. Raj Kumar Mishra
    Permalink to comment#


    awesome work! cool transition and eye catching too. but as usual(with IE) there is an issue with different versions of IE. None of the version of IE display proper menu. In IE8 and IE7 you can not even get the alignment and transition, some how it works on IE9 but misalignment. Rest browsers it works nice.

    Well Done :) !!!

  10. Paul Santosh
    Permalink to comment#

    This is really awesome, great work! :)

  11. Samuel
    Permalink to comment#

    This Indicates the power of CSS3. Awesome and great works. Thanks for sharing.

  12. mayur
    Permalink to comment#

    I found something unusual. Just click any leaf over there and do not release your mouse.
    Now drag your mouse out of leaf .
    Release your mouse click .
    The leaf and font remains expanded .

    Please try the same.

  13. Yatin
    Permalink to comment#

    This is really very nice! :)

  14. yogesh
    Permalink to comment#

    how to make it vertical? I have vertical menubar….

  15. heya
    Permalink to comment#

    how can i change the shape?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed