Навсякъде може да се намери информация за това как се правят бутони със заоблени краища(sliding doors), но реших да покажа как се прави ‘sliding doors’ с още един ефект – поява на изображение при hover
<ul> <li> <a href="#" title=""><strong>test</strong><span> </ span></a> </li> <li> <a href="#" title=""><strong>test</strong><span> </ span></a> </li> <li> <a href="#" title=""><strong>test</strong><span> </span></a> </li> <li> <a href="#" title=""><strong>test</strong><span> </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; }
А ето тук можете да видите пример.
Loading ...
Loading ...
