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.
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 div
s 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With