Journal CSS: Buttons

I once promised how to get this to work - so here you go. A more in depth explanation will be included in Creative Journal CSS ...whenever I get it finished

The red hover is just for this example, so you can see what's going on. If you copy the code below, the red hover wont be there. Though if you're feeling really fancy, what you can do is set the hover to be a real hover image, make the button shine/glint or something silly like that. Additionally, if you don't want to have to re-edit the single background image each time you add a button, you could make the button the background of the link... which would open the door for animated buttons (which don't make sense, but then, animated stamps don't either )

You can make your button set as big as you like, and fill it with as many buttons as you like, and put those buttons wherever your heart desires - the last chunk of CSS should be seen only as an example of how to get it working, you'll have to re-write it to suite your button set design.

If you need it, there's my button template to get your buttons going.

Lastly, this technique is not restricted to buttons - you could make the background a map of the world (or a city/town... whatever) and then turn different areas into links for instance. This technique basically emulates HTML Image Maps.

Das fancypant buttons

Das HTML

<div class="buttons">
  <div class="b_1"><a href="#"></a></div>
  <div class="b_2"><a href="#"></a></div>
  <div class="b_3"><a href="#"></a></div>
  <div class="b_4"><a href="#"></a></div>
  <div class="b_5"><a href="#"></a></div>
  <div class="b_6"><a href="#"></a></div>
  <div class="b_7"><a href="#"></a></div>
</div>

Das CSS

.buttons{
  background: url( :link:i.koopseht.net/buttons.png: ) no-repeat;
  width: 302px;
  height: 279px;
  position: relative
}

.buttons br{display:none}

.buttons a{
  display: block;
  width: 50px;
  height: 50px;
  position: absolute
}

.b_1 a{top:25px;left:15px;width:70px;height:70px}
.b_2 a{top:130px;left:30px;width:60px;height:60px}
.b_3 a{top:55px;left:92px;width:93px;height:100px}
.b_4 a{top:170px;left:105px;width:80px;height:80px}
.b_5 a{top:10px;right:30px;width:83px;height:90px}
.b_6 a{top:110px;right:30px;width:80px;height:80px}
.b_7 a{bottom:10px;right:40px;width:70px;height:70px}

Have at it