CODEWITHSUNDEEP
htmlcssimagebuttonimagebutton
jekyll-friend
jekyll-friend

Reputation: 61

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 http://www.geogebra.org/team for something with the same spirit). The question is to do so as follows

HTML

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

CSS

.modern_art{
     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 ::before, but this is not enough to get a nice button. What would you recommend me?

Upvotes: 0

Views: 2484

Answers (3)

gdyrrahitis
gdyrrahitis

Reputation: 5968

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">
  <figure>
    <img src="https://i.sstatic.net/g1Ce8.png" alt="bg" />
    <figcaption>
      <div>
      Caption here
      </div>
    </figcaption>
  </figure>
</a>

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

UPDATE

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

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46559

Well, you're very close with your CSS. All it needs is an explicit width and height, and some padding.

.modern_art{
     display:inline-block;
     width: 252px; height:20px;
     background: #a9a9a9 url(https://i.sstatic.net/s2ZG0.png) no-repeat center 40px;
     padding: 318px 60px 30px;
     text-align:center; /* oh well, and some styling to make the text look similar to the example */
     color:black;
     text-decoration:none;
     font-size:20px;
     letter-spacing:.1em;
}
<a class="modern_art" href="...">Modern Art</a>

Upvotes: 0

Felix
Felix

Reputation: 80

Found this, might help you out.

https://css-tricks.com/design-considerations-text-images/

Upvotes: 0

Related Questions