pixels and digital bits

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!

3 comments
to Tutorial - CSS Overlapping Arrow Buttons

1. Ben Gribbin

   on Tuesday, February 20th, 2007 at 7:48 am:

   Absolutely sublime, love it.
   Also, the site design for this website is beautiful, well done!!!

2. Ders Örnek

   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

3. Howard

   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

Leave a comment