css заоблени бутони с втори ефект

Навсякъде може да се намери информация за това как се правят бутони със заоблени краища(sliding doors), но реших да покажа как се прави ‘sliding doors’ с още един ефект – поява на изображение при hover

<ul>
   <li>
       <a href="#" title=""><strong>test</strong><span>&nbsp;</ span></a>
   </li>
   <li>
       <a href="#" title=""><strong>test</strong><span>&nbsp;</ span></a>
   </li>
   <li>
       <a href="#" title=""><strong>test</strong><span>&nbsp;</span></a>
   </li>
   <li>
       <a href="#" title=""><strong>test</strong><span>&nbsp;</span></a>
   </li>
</ul>

a-то държи лявата част, единият span държи дясната част на картинката със заоблянето, а вторият span държи картинката, която се появява при hover

.tab_bar {
	overflow: hidden;
}
.tab_bar li{
	float: left;
	position: relative;
}
.tab_bar li a{
	background: url(images/menu/left_tab.jpg) no-repeat top left;
	padding: 9px 0 9px 6px;
	display: block;
	text-decoration: none;
}
.tab_bar li a strong{
	background: url(images/menu/right_tab.jpg) no-repeat  top right;
	padding: 9px 17px 9px 10px;
}
.tab_bar li a .triangle{
	display: none;
}
.tab_bar li a.active, .tab_bar li a:hover{
	background: url(images/menu/left_tab_active.jpg) no-repeat top left;
	color: #FFF;
}
.tab_bar li a.active strong, .tab_bar li a:hover strong{
	background: url(images/menu/right_tab_active.jpg) no-repeat  top right;
	padding: 9px 17px 9px 10px;
 
}
 
.tab_bar li a.active .triangle, .tab_bar li a:hover .triangle{
	display: block;
	background: url(images/menu/triangle.jpg) no-repeat;
	width: 7px;
	height: 3px;
	position: absolute;
	bottom: 0;
	left: 43%;
	line-height: 3px;
}

А ето тук можете да видите пример.

Оставете коментар

Design To HTML от Стайл нет