CSS İç Sınır?

Question

Soldaki düğmeyi yalnızca CSS ile oluşturdum. Bir div içindeki bir div. Ancak, sağdaki üç düğme, img etiketlerinde background özellikleridir. Bunu yaptım, böylece here talimatlarını takip ederek bir rollover etkisini simüle edebildim.

Şimdi, CSS kullanarak diğer üç, ilk düğmeye olduğu gibi, iç kenarlık eklemek için bir yol var mı?

Fiddle here.

Answer 1

box model göre, dolgu içeriği ve arasındadır border. Hatta saf CSS düğmesi için, bunu gerçekleştirmek için herhangi bir ekstra div s gerekmez

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

: Sen gibi görüntüleri stil gerekir. Yukarıda açıklandığı gibi

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

Burada çift sınırın bir DEMO var: görüntü background-image olduğunda tarzı takiben durumda içindir.

Answer 2

Düğme için yaptığınız gibi aynı yaklaşımı kullanın - simgeleri arka plan görüntüleri olarak iç kısma uygulamanız yeterlidir. Yani bir beyaz kenarlıklı (davanız img olarak) bazı dolgu, bir iç div ile bir div ve bir arka plan görüntüsü olmalıdır (simgeler.)

Answer 3

Simge resimlerini doğrudan değiştiremediğinizi farz ederseniz, onları "Sepete Ekle" ile aynı şekilde bir div içine sarın. Ayrıca her iki

background-position: center center; 

simge küçük img içinde merkezli kalır emin olmak için, ve/veya beyaz ötesi kokan bu yüzden

background-size: 24px 24px; 

biraz aşağı arka plan ölçek kullanmanız gerekecektir t sembollere koşun.

Answer 4

Düğmeyi yapmak için iki <divs> ve <a>'a ihtiyacınız yoktur. Tek bir <a> ile yapabilirsiniz. Hem görüntüler hem de düğme için dış kenarlığı yapmak için box-shadow'u kullanabilirsiniz. <img> öğelerinde background-images'u merkezleyin.

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

Çıktı:

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