/*
=================================================
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.