Awesome Capsule Type PureCSS3 Menu Widget

Click to Enlarge

How this Menu Works ?

This menu works with Css3. This menu requires Modern browsers for Its Background Support, Because those radial gradients works only with prefixes in some browsers, Though i've added prefixes but still this fails to work, then let me know about them.

Live Demo [ Yellow Only ]

Watch Live Demo of Yellow Menu.

Let's Start

# How to add this to your blog ?
# First open blogger dashboard,
# Navigate to template,
# Click on edit Html,
# find ]]></b:skin>
# If doesn't work Read Adding External CSS Code to Blogger Blog
# Now just above that code Paste Below written CSS code,

.cbtnav
{
width:965px;
margin:0px auto;
padding:10px;
}
.cbtnav li{
  display:inline-block;
}
.cbtnav a
{
  height:30px;
  width:130px;
  background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  text-decoration: none;
  color: rgb(143, 0, 0);
  text-transform: uppercase;
  display: inline-block;
  text-shadow: -1px 1px 0 rgba(255, 0, 0, 0.14);
  text-align:center;
  font-weight: bold;
  text-align:center;
  border:none;
  border-radius:35px;
  margin: 2px;padding-top:9px;
  -webkit-transition: all 0.12s linear;
  -moz-transition: all 0.12s linear;
  -o-transition: all 0.12s linear;
  transition: all 0.12s linear;
  -webkit-transform: translate3d(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow:0 6px 3px rgba(0,0,0,.3);
}
.red a{
  background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
color:yellow;
}
.black a{
  background:-webkit-radial-gradient(top center, black, #B3B3B3);
  background:radial-gradient(top center, black, #B3B3B3);
  background:-moz-radial-gradient(top center, black, #B3B3B3);
  background:-ms-radial-gradient(top center, black, #B3B3B3);
  color:white;
}
.minimal a{
  background:-webkit-radial-gradient(top center, white, #C2C2C2);
  background:radial-gradient(top center, white, #C2C2C2);
  background:-moz-radial-gradient(top center, white, #C2C2C2);
  background:-ms-radial-gradient(top center, white, #C2C2C2);
  color:black;
}
.blue a{
  background:-webkit-radial-gradient(top center, #0047FF, #00E0FF);
  background:radial-gradient(top center, #0047FF, #00E0FF);
  background:-moz-radial-gradient(top center, #0047FF, #00E0FF);
  background:-ms-radial-gradient(top center, #0047FF, #00E0FF);
  color:white;
}
.yellow a{
  background:-webkit-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:-moz-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:-ms-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
}
.cbtnav a:hover
{
opacity:0.8;
}
.cbtnav a:active
{
box-shadow:none;
  -webkit-transform: translate3d(0px, 7px, 0);
  -moz-transform: translate3d(0px, 7px, 0);
   transform: translate3d(0px, 7px, 0);
  -ms-transform: translate3d(0px, 7px, 0);
  -o-transform: translate3d(0px, 7px, 0);
}

# Now save template.

Menu Styles

# This menu has 5 ready styles to use within., Just follow the steps.
# After saving template, navigate to layout, Click add widget, Select html/javascript
# Now copy the below html code with instructions given below.

<ul class="cbtnav yellow">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
<li><a href="#">Link #5</a></li>
</ul>

Now Modify These Things

-+- Change all Yellow background texts with Link location,
-+- Change all red background texts with Link names Respectively.
-+- Change Black background text with Color styles you want in menu [Only Blue,Red, Black, Minimal,Yellow] will be available.

Welldone! You've Made it!

You're done adding the menu, If any problem is there then sure to inform me in comments below.

More about → Awesome Capsule Type PureCSS3 Menu Widget