jerie.de

For a recent project I created a navigation bar and css only styled buttons. As it is no longer used for the project feel free to use it on your own. It’s still “work in progress” and can be tweaked. But you get the idea.

Annotation:
As I wanted to style the links (a class=”tab-button”) without any additional elements it’s a must have to set the title attribute the same as the link text. You have to play with padding on the .tab-button and .tab-button::before to fit your needs. You can also add a span to the link and use the same css as its used for the .tab-bar (ul = a, li = span).

Markup

<ul class="tab-bar">
	<li>Link 1</li>
	<li class="active">Link 2</li>
	<li>Link 3</li>
</ul>

<hr />

<a class="tab-button" title="Button 1" href="#">Button 1</a>
<a class="tab-button active" title="Button 2" href="#">Button 2</a>

CSS

ul
{
	list-style: none outside none;
}
.tab-bar,
.tab-button
{
	border-radius: 8px;
	overflow: hidden;
	background-image: -moz-linear-gradient(center bottom , #fff 30%, #c6c5c5 75%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #fff),color-stop(0.75, #c6c5c5));
	padding: 3px;
}
.tab-bar li:first-child {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}
.tab-bar li:last-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.tab-button::before,
.tab-button.active::before
{
    content: attr(title);
	position: absolute;
	border-radius: 8px;
	padding: 0 20px;
	top: 3px;
	left: 3px;
}
.tab-bar li
{
	float: left;
	width: 33.333%;
	margin: 0 -1px;
	padding: 10px 0;
}
.tab-bar li,
.tab-button::before,
.tab-button.active::before
{
    border: 1px solid #aeaeae;
    text-align: center;
 	text-shadow: 1px 1px 0 #fff;
	background-image: 	-webkit-gradient(linear,left bottom, left top, color-stop(0, #CCCCCC),color-stop(1, #EEEEEE));
	background-image: 	-moz-linear-gradient(center bottom, #ccc 0%, #eee 100%);
}
.tab-button
{
 	line-height: 2em;
    padding: 5px 20px 19px 28px;
	position: relative;
}

.tab-bar li.active,
.tab-button.active::before
{
    background: none repeat scroll 0 0 #b8b8b8;
    box-shadow: 2px 2px 6px -4px inset;
 	text-shadow: none;
}

Tags: CSS3, Gradient