[Resolved] Clickable button within image

[James Harvey]

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

[Dee Broughton]

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.

[Tom]

Thanks so much, Dee! That’s perfect 🙂

[Author]

Posts