jekyll-friend jekyll-friend - 5 months ago 9
HTML Question

Image-button with css

I would like to learn how to do 'nice buttons' where the picture is added with css. For instance suppose that I want something like the following

nice button

(that is, the picture and the text are together and the whole picture is the link. You may see for something with the same spirit). The question is to do so as follows


<a class="modern_art" href="...">Modern Art</a>


background-image: url(/pictures/modern_art.jpg)
/* or something similar */
/* more instructions */

By now, the best I have done is to place the picture and afterwards the name with
, but this is not enough to get a nice button. What would you recommend me?


try this one.

In this fiddle you can find something similar to what you ask. Just make an anchor tag as a thumbnail and then put your content inside it. Something like this one:

<a href="#" class="thumbnail">
    <img src="" alt="bg" />
      Caption here

Then I'm using positioning and CSS3 transitions to hide and show the caption.


I have updated the code to transition back to the normal state, rather than instantly getting back to it. Fiddle here