I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are background properties on img tags. I did this so I could simulate a rollover effect following instructions from here.

Now, is there a way to add the inner border, as in the first button, to the other three using CSS?

Fiddle here.

I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are background properties on img tags. I did this so I could simulate a rollover effect following instructions from here.

Now, is there a way to add the inner border, as in the first button, to the other three using CSS?

Fiddle here.

• javascript
• html
• css

• 1 Wouldn't it just be easier to add it to the image itself? – Brettski Commented Jan 29, 2012 at 5:49
• 1 First, how would you do that? Second, let's say it isn't. – john Commented Jan 29, 2012 at 5:51

4 Answers 4

According to the box model, padding is between the content and border. You should be able to style the images like:

 .img-btn {
     background: #FFF; // inner border color
     padding: 2px; // inner border width
     border: 2px solid #[yourgreen]; // outer border
 }

You shouldn't need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:

.img-btn {
    background: #FFF url('your.img') no-repeat;
    padding: 2px;
    border: 2px solid #[yourgreen];
    width: [image width];
    height: [image height];
    background-position: center center;
}

Here's a DEMO of double-border as described above.

You don't need two <divs> and an <a> to do the button. You can do it with a single <a>. For both the images and the button you can use box-shadow to do the outer border. Center the background-images in the <img> elements.

Demo: http://jsfiddle.net/ThinkingStiff/bNmzB/

Output:

HTML:

<a id="add" href="#">Add To Cart</a>
<img id="facebook" class="icon" />
<img id="twitter" class="icon" />
<img id="email" class="icon" />

CSS:

#add {
    background-color: #9bc9c7;
    border: 1px solid white;
    box-shadow: 0 0 0 2px #9bc9c7;
    color: white;
    display: inline-block;
    font: normal 13px/25px Helvetica, Arial, Sans Serif;
    height: 25px;
    margin-right: 6px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 120px;
    vertical-align: top;
}

#add:hover {
    background-color: #eabeb2;
    box-shadow: 0 0 0 2px #eabeb2;
}

.icon {
    background-color: rgb( 155, 201, 199 );
    border: 1px solid white;
    box-shadow: 0 0 0 2px rgb( 155, 201, 199 );
    height: 25px;
    margin-right: 3px;
    width: 25px;       
}

Use the same approach as you did for the button - just treat the icons as background images to the inner div. So you should have a div with some padding, an inner div(in your case img) with a white border, and a background image (the icons.)

Assuming you can't modify the icon images directly, just wrap them in a div in the same way as "Add to Cart". You'll also need to use either

background-position: center center;

to ensure that the icon stays centered within the smaller img, and/or

background-size: 24px 24px;

to scale the background down a bit so the white border doesn't run into the symbols.