[Resolved] Clickable button within image

Home Forums Support Clickable button within image

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #99931
    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

    #99935
    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.

    #99982
    Tom
    Lead Developer
    Lead Developer

    Thanks so much, Dee! That’s perfect 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.