Site logo

Archived topic

Clickable button within image

2 replies · Started by James Harvey on April 18, 2015

Viewing posts 1–3 of 3

Hi Tom,

Quick question - how do you create buttons within an image as with your 'Pick & Choose' button on the lower part of your home page?

regards

James

Hi, James -

Just trying to help out here. I think that's not really a theme question, rather it seems to me to be a basic css question. Tom has just styled the link with css to resemble a button and put it on top of a background image. You can see it, for example, if you right-click the button and "inspect element" in Firefox. You will probably want to style a hover for it, too. For example, I have a button that is styled like this:

.mybuttonstyle {
      display: inline-block;
    font-size: 22px;
background-color: #4A7C4A;
    color: #FFF;
    height: 33px;
    width: 220px;
    border-radius: 4px;
    border: 1px solid #FFF;
    box-shadow: 2px 2px 3px #111;
    text-align: center;
    padding-top: 6px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.mybuttonstyle:hover {
 text-shadow: 1px 1px 2px #111;
 box-shadow: 3px 3px 6px #000;
}

The code above goes in the custom CSS.

Then the link would be

<a href="http://mysite.com" class="mybuttonstyle">Check Out This Button!</a>

Excuse me if you were asking something different. Hope that helps.

Thanks so much, Dee! That's perfect :)

This archived topic is closed to new replies.