Някой знае ли как се правят такива бутони със снимки :?

HTML:
<a href='http://google.bg/' style=' float:left; margin:10px;'>
  <div style='width:160px;padding:5px;height:120px;background:#FFF;border:1px solid #ccc;'>
       <img src='image.jpg' width='160' height='120' /> 
 </div>
 <div style='padding:5px;'>текст под картинката ..</div>
</a>
ДЕМО:
http://jsfiddle.net/6q5RL/2/
 
Много по-просто може да стане и без js, а ефектът е същият.

HTML:
<div class="image">
<img src="img.jpg" />
Текст
</div>
<div class="image">
<img src="img.jpg" />
Текст
</div>

[css].image:hover {
background: silver;
}[/css]
 
Че даже стане по - хубаво от сайта.
ДЕМО: http://jsfiddle.net/5k8PY/



HTML:
<div class="box">
    
    <a href="#">
    
    <img src="http://factotumofarts.files.wordpress.com/2013/11/images-7.jpeg?w=122&h=122" width="122" height="122" />
    
        Some link...
    
    </a>
    
</div>

[css]
.box {
width: 132px;
border: 1px solid #dddddd;
}
.box a {
padding: 5px;
display: block;
background-color: #f5f5f5;
color: #555555;
text-decoration: none;
}
.box a:hover {
color: #f5f5f5;
background-color: #555555;
}
[/css]
 
anonimen каза:
Много по-просто може да стане и без js, а ефектът е същият.

Горещо се препоръчва да е без JS по принцип :)
 

Back
Горе