Fancy Purple Menu - CSS3

/* ================================================= CSS ================================================== */ * { padding: 0; margin: 0; } a { text-decoration: none; } body { background: url(http://f.cl.ly/items/3R2V3Y3U0m12381E1P22/body-bg.jpg) #111; } nav { margin:50px 0 0 50px; } .purple-btn { font: bold 18px Arial, Helvetica, sans-serif; color: #f4b9e9; text-shadow: 0 1px 0 rgba(0,0,0,1); border-radius: 5px; margin: 0 20px 0 0; display: inline-block; float: left; border: 1px solid rgba(0,0,0,1); /* Gradients */ background: #731962; background: -moz-linear-gradient(top, #731962 0%, #490a3d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#731962), color-stop(100%,#490a3d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #731962 0%,#490a3d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #731962 0%,#490a3d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #731962 0%,#490a3d 100%); /* IE10+ */ background: linear-gradient(top, #731962 0%,#490a3d 100%); /* W3C */ /* Box Shadow */ -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.33); -moz-box-shadow: 0 1px 0 rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.33); -o-box-shadow: 0 1px 0 rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.33); -ms-box-shadow: 0 1px 0 rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.33); box-shadow: 0 1px 0 rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.33); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .purple-btn:hover { text-shadow: 0 1px 0 rgba(0,0,0,43), 0 0 15px rgba(255,255,255,.5); /* Gradients */ background: #792b6a; background: -moz-linear-gradient(top, #792b6a 0%, #490a3d 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#792b6a), color-stop(100%,#490a3d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #792b6a 0%,#490a3d 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #792b6a 0%,#490a3d 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #792b6a 0%,#490a3d 100%); /* IE10+ */ background: linear-gradient(top, #792b6a 0%,#490a3d 100%); /* W3C */ } .purple-btn:active { color: #a34d92; text-shadow: 0 1px 0 rgba(0,0,0,1); /* Gradients */ background: #490a3d; /* Old browsers */ background: -moz-linear-gradient(top, #490a3d 0%, #731962 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#490a3d), color-stop(100%,#731962)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #490a3d 0%,#731962 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #490a3d 0%,#731962 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #490a3d 0%,#731962 100%); /* IE10+ */ background: linear-gradient(top, #490a3d 0%,#731962 100%); /* W3C */ } /* Noise Pattern */ .purple-btn span { background: url(http://f.cl.ly/items/3R2V3Y3U0m12381E1P22/white-noise.png); display: block; padding: 12px 20px; } ​ /* ================================================= HTML ================================================== */ <nav> <a href="#" class="purple-btn"><span>Home</span></a> <a href="#" class="purple-btn"><span>About Us</span></a> <a href="#" class="purple-btn"><span>Portfolio</span></a> <a href="#" class="purple-btn"><span>Contact</span></a> </nav>​
You can play with the example here http://jsfiddle.net/jorgeguerrero/2tGLB/6/

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.