Това е втори вариант на заоблените бутончета, при който ползвам sprite. На мен лично ми изглежда по-лесничък от другия, но сега се сетих за него 🙂

<ul class="tab_bar">
<li>
   <a class="active" title="Menu 1" href="#"><span><strong>Menu 1</strong></span></a>
</li>
<li>
   <a title="Menu 2" href="#"><span><strong>Menu 2</strong></span></a>
</li>
<li>
   <a title="Menu 3" href="#"><span><strong>Menu 3</strong></span></a>
</li>
<li>
   <a title="Menu 4" href="#"><span><strong>Menu 4</strong></span></a>
</li>
</ul>

отново всичко е сложено в <a> като  и тук span държи дясното заобляне, а strong държи триъгълничето за hover ефекта. Разбира се като за начало правим един reset на ul-то.

ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
.tab_bar {
	overflow: hidden;
}
.tab_bar li{
	float: left;
 
}
.tab_bar li a{
	background: url(images/tab.jpg) no-repeat 0 -32px;
	padding: 0px 0 0px 8px;
	display: block;
	line-height:32px;
	text-decoration: none;
	color: #000;
}
 
.tab_bar li a span{
	background: url(images/tab.jpg) no-repeat right -32px;
	padding: 0px 8px 0px 0px;
	display: block;
}
.tab_bar li a:hover{
	background: url(images/tab.jpg) no-repeat 0 0;
	color: #fff;
}
.tab_bar li a:hover span{
	background: url(images/tab.jpg) no-repeat right 0;
 
}
.tab_bar li a:hover span strong{
	background: url(images/tab.jpg) no-repeat 50% 0px;
	display: block;
}

Ето го и самият пример

Posted in CSS