CSS Inner Border?

Question

Creé el botón de la izquierda puramente con CSS. Es un div dentro de un div. Sin embargo, los tres botones a la derecha son background propiedades en etiquetas img. Hice esto para poder simular un efecto de vuelco siguiendo las instrucciones del here.

Ahora, hay una manera de agregar el borde interno, como en el primer botón, a los otros tres el uso de CSS?

Fiddle here.

Answer 1

De acuerdo con la box model, el relleno está entre el contenido y frontera. Usted debe ser capaz de estilo de las imágenes como:

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

No debería ser necesario ningún div s adicionales para lograr esto, incluso para su botón puro CSS. Siguiendo el estilo es para el caso en que la imagen es una imagen de fondo:

.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; 
} 

Aquí hay una DEMO de borde doble como se describe anteriormente.

Answer 2

Utilice el mismo enfoque que utilizó para el botón: simplemente trate los iconos como imágenes de fondo en el div interno. Por lo que debe tener un div con un poco de relleno, un div interior (en su caso img) con un borde blanco, y una imagen de fondo (los iconos.)

Answer 3

Suponiendo que no puede modificar las imágenes del icono directamente, simplemente envuélvalas en un div del mismo modo que "Agregar al carro". Usted también necesitará utilizar ya sea

background-position: center center; 

para asegurar que el icono permanece centrado en el img más pequeño, y/o

background-size: 24px 24px; 

Para escalar el fondo un poco por lo que el borde blanco doesn' topa con los símbolos.

Answer 4

No necesita dos <divs> y <a> para hacer el botón. Puede hacerlo con un solo <a>. Tanto para las imágenes como para el botón, puede usar box-shadow para hacer el borde exterior. Centre el background-images en los elementos <img>.

Demostración: http://jsfiddle.net/ThinkingStiff/bNmzB/

Salida:

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;  
}