Reply To: Clickable button within image

[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.