# CSS tab effect on click

**URL:** <https://forum.kirupa.com/t/css-tab-effect-on-click/194358>\
**Category:** web dev\
**Created:** [July 22, 2006, 3:45pm UTC](https://forum.kirupa.com/t/css-tab-effect-on-click/194358 "2006-07-22T15:45:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![logikal2](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/logikal2/32/1143_2.png) [@logikal2](https://forum.kirupa.com/u/logikal2)\
**Post date:** [July 22, 2006, 3:45pm UTC](https://forum.kirupa.com/t/css-tab-effect-on-click/194358/1 "2006-07-22T15:45:24Z")

</div>

Hey guys,

Here’s a photo of what I’ve got:  
 ![](http://img214.imageshack.us/my.php?image=untitled3xv1.jpg)

[LIST=1]  
[_]Each of the 5 buttons is in a separate column.  
[_]The first button has all CSS borders except the bottom border enabled (looks like a tab) AND a background color (pale yellow)  
[_]The other buttons have all borders set=0.  
[_]The yellow area below the buttons (with the green border) is a separate row with an iframe.  
[/LIST]

What I’m trying to do is, when a user presses a button, the button clicked will look tabbed (like the first button now) in addition to opening a new page in the iframe, and all the other buttons will have their background colors and borders negated.

Can anyone help? Let me know if I need to explain it better :hangover:

Thanks in advance,  
Matt