CSS Tricks

We made this for the menu of E.S.Photography. It takes the standard CSS rounded corner box and adds a central box that can change colour.

The button is built from three things. Two images, one for the top and one for the bottom, and an <a> made into a block element.

Example Button

As there are three components to this button it needs two elements wrapped around an <a>. I used divs here for simplicity.

<div class="ButtonWrapperOne">
<div class="ButtonWrapperTwo">
<a href="#" title="Example Button">Example Button</a>
</div>
</div>

Now we apply the top and bottom images to the two wrappers. The padding on ButtonWrapperTwo is as thick as you made the image border, this keeps the <a> from overlapping it.

.ButtonWrapperOne {
background:url(images/buttonwrapperone.gif) no-repeat top;
}

.ButtonWrapperTwo {
background:url(images/buttonwrappertwo.gif) no-repeat bottom;
padding:4px;
}

Display:block, width:119 and padding:2px 0 makes the <a> will the space within the center of the button.

.ButtonWrapperTwo a {
display:block;
width:119px;
padding:2px 0;
background:#eee;
margin:auto;
text-align:center;
}

It is important that the background colour of the <a> stay close to that of the image border. If it is too different it shows the box in the center, but if it subtle enough the fact that only the center changes colour isn't brought to your attention.

.ButtonWrapperTwo a:hover {
background:#fafafa;
}

This last peice is pure decoration.

.ButtonWrapperTwo a {
font-family:serif;
font-size:16px;
font-weight:bold;
color:#595C69;
text-decoration:none;
line-height:1.1em;
}

And there you have it, a nice round cornered button that can change colour and expand vertically.

One problem that we had to overcome when updating E.S.Photography was how to stop people saving images from it. We didn't want to use the Javascript technique that stops people from using right click for a number of reasons, the fact that it is unrelyable and people find it anoying are two examples.

After casting about for inspiration we thought about using a transparent gif in front of the image, that way when people right clicked to save an image they would in fact be saving a transparent gif. For example try to save the image below by right clicking on it.

This is created with the following code.

<p class="exampleImage">
<img src="images/this_photograph_is_copyrighted.gif" alt="Photo of John Baldock" />
</p>

p.exampleImage {
width:102px;
height:129px;
background: url(images/john.jpg) no-repeat;
}

.exampleImage img {
width:102px;
height:129px;
}

Annoyingly if you view the image above in IE it will have a 3 pixel gap between the image and the bottom border. To rectify the problem feed IE this extra code.

.exampleImage img {
margin-bottom:-3px;
}

To add a border or move the image add this code to the <p> tag.

p.exampleImage {
border:1px solid #555;
margin:auto;
}