Saturday, June 24th, 2006
Tutorial - CSS Overlapping Arrow Buttons
As a User Interface Designer for Art & Logic, Inc. I’m always playing with icons, knobs, dials, sliders, led’s… and buttons.
Buttons, buttons, buttons.
I was recently asked to create arrow buttons for a step-through type of navigation. At first, from a CSS standpoint, it seemed like trying to fit a triangle peg in a square hole. But with a little creative maneuvering I was able to work it out. I’m sure there are many ways… but here’s my approach.
Here is an example of the finished menu, complete with hover and active styles:
I set up the menu using CSS list styles, like so:
li.buttons { float: left;}
ul.menu {
list-style-type: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px;
margin: 0px;
}
.menu a {
margin: 0px;
height: 20px;
padding: 0px 0px 0px 0px;
float: left;
display: block;
text-align: center;
text-decoration: none;
color: #000;
background: #ccc;
}
.menu a:hover {
background: #dddddd;
}
The HTML as follows:
<ul class="menu">
<li><a href="#">Thing 1</a></li>
<li><a href="#">Thing 2</a></li>
<li><a href="#">Thing 3</a></li>
</ul>
At first I thought I could simply stick an arrow separator between each button, but had problems with the button edges showing through the negative space of the transparent gif. It wasn’t perfect.
So, instead, I split the arrow separator into two graphics: arrowL and arrowR
I added the images to the left and right of each <a> tag’s button text. This exposed a few image spacing and position problems, so I assigned the stepArrow style.
<li><a href="#">
<img src="arrowR.gif" align="absmiddle" class="stepArrow">
Thing 1
<img src="arrowL.gif" align="absmiddle" class="stepArrow">
</a></li>
I also included align="absmiddle" to vertically align the text/image.
The stepArrow CSS is as follows:
.stepArrow {
position:inherit;
display:inline;
margin-top: 0px;
margin-bottom: 0px;
}
And that’s it! You could probably get creative with the separator shapes and do some fun things with it, but it’s a foundation for how to create seemingly overlapping buttons.
If you found this helpful or have other ideas about how to approach this, please let me know!
Daisey Traynham
RSS 2.0 Feed
del.icio.us
Digg it
reddit
Technorati
Simpy
on Tuesday, February 20th, 2007 at 7:48 am:
Absolutely sublime, love it.
Also, the site design for this website is beautiful, well done!!!
on Sunday, August 10th, 2008 at 8:35 am:
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm
on Friday, December 12th, 2008 at 1:08 pm:
This is great - I’ve been looking for just this technique for quite a while and am already using it to good effect!
Thanks
on Saturday, January 10th, 2009 at 7:28 pm:
[…] Tutorial Link: Click Here […]
on Wednesday, February 18th, 2009 at 9:36 am:
[…] 24.重叠箭头式按钮 : Firefly-multimedia […]
on Thursday, February 19th, 2009 at 4:06 am:
thanks for share …
keep share………
on Thursday, February 19th, 2009 at 4:08 am:
i found this error on your site…. please check that;s bug ..
Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/firefly/public_html/chatterbox/wp-content/plugins/SK2/sk2_second_chance.php:2) in /home/firefly/public_html/chatterbox/wp-content/plugins/wp-shopping-cart/wp-shopping-cart.php on line 34
thanks
on Wednesday, May 27th, 2009 at 5:01 am:
[…] CSS Overlapping Arrow Buttons […]
on Wednesday, May 27th, 2009 at 1:55 pm:
CSS Overlapping Arrow Buttons…
I was recently asked to create arrow buttons for a step-through type of navigation. At first, from a CSS standpoint, it seemed like trying to fit a triangle peg in a square hole. But with a little creative maneuvering I was able to work it out. I’m s…
on Wednesday, May 27th, 2009 at 2:02 pm:
[…] CSS Overlapping Arrow Buttons […]
on Thursday, May 28th, 2009 at 9:24 am:
[…] This post was Twitted by tewfiq - Real-url.org […]
on Wednesday, June 3rd, 2009 at 6:40 pm:
[…] CSS Overlapping Arrow Buttons […]
on Saturday, July 4th, 2009 at 5:06 pm:
[…] CSS Overlapping Arrow Buttons […]
on Wednesday, August 5th, 2009 at 9:03 am:
i can,t render the css Overlading for this button. so pls send the right code
on Sunday, August 9th, 2009 at 9:57 am:
[…] CSS Overlapping Arrow Buttons […]
on Sunday, August 9th, 2009 at 9:57 am:
[…] CSS Overlapping Arrow Buttons […]
on Tuesday, August 11th, 2009 at 7:18 am:
[…] CSS Overlapping Arrow Buttons […]
on Tuesday, August 11th, 2009 at 6:09 pm:
Would love to start leaning CSS again after seeing this writeup.
on Friday, August 28th, 2009 at 3:10 am:
[…] CSS Overlapping Arrow Buttons […]
on Monday, September 14th, 2009 at 7:42 am:
[…] View original post here: Tutorial - CSS Overlapping Arrow Buttons at pixels and digital bits […]
on Friday, October 9th, 2009 at 7:48 pm:
Love it… exactly what I was looking for, thanks!
on Thursday, November 5th, 2009 at 1:51 am:
very good
on Sunday, November 8th, 2009 at 6:36 pm:
[…] Voir le Tutoriel […]
on Sunday, November 15th, 2009 at 2:30 pm:
[…] 2- CSS Overlapping Arrow Button Tutorial CSS Overlapping Arrow Buttons […]
on Wednesday, December 9th, 2009 at 12:52 pm:
Is anybody knows the command (not the “active” one) that allows the button to keep permanently a colour after it’s been hit.
Here, in the presented example, how the tab “Thing2″ to remain red after it’s been hit ?
The “active” one changes the button’s colour once you hit the mouse’s click, but once you release it the button takes its original colour, but in my case I want the button to have a different colour from before to after the mouse click !
Any idea, I get really stuck on this for weeks ?!
Here is a link to my forum, with the 3 oranges buttons :
http://www.crabzy.com/viewforum.php?f=198&m=1
Thansk for help @: info@crabzy.com
on Thursday, January 28th, 2010 at 6:12 pm:
Like it. Great for breadcrumbs. Thanks!