Archived

This topic is now archived and is closed to further replies.

  • 0

Create CSS for a custom pressed/hover Callout button


Question

Posted · Report post

I have created a Callout (see the orange bar on the below website) and uploaded a custom "Start Now" button. Is there anyway I can also add a hover button? I want it so when you mouse over the button, the button looks pressed. I have the .png file, I'm just not sure how to reference it and where.

 

I worked recently on a website design for a Drupal website and the developer taught me how to save a "Sprite" image for buttons. Would that work in Wordpress and the Pagelines Framework? Can you point me to the CSS that I would create to make the hover button happen?

 

Website is: http://www.family-classics.com/

 

Thanks!

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Ok, just had a chance to try this. I'm adding it the Custom Code area, but will eventually be making a Child theme.

 

This is what I have:

 

#callout a:hover   {

background-image:url('http://www.family-classics.com/wp-content/uploads/2013/05/StartNowHover.png');
}

 

But it's not working. I also tried it this way:

 

#callout a:hover   {

background-image:url('StartNowHover.png');
}

 

But that doesn't work either. What am I not doing right?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

You know, I thought I was one smart egg when it comes to this sort of thing, but this one challenged me beyond all measure.

 

Here's what I did.

1.  Remove the callout button from the Callout settings, leaving only the link.

2.  Remove any previous callout CSS you've tried (to ensure that it doesn't conflict.

3.  Upload your buttons (there will be two images) to Dashboard > Media > Add New.  Once each is uploaded, click the Edit link that appears, and in the right side, you'll see a full URL for the image. Copy it, and paste it to a notepad file.  Do this for each of the two images.

A note about the images: You will want the second image to be just the exact same as the first, but using a different color scheme.

4. You'll want to modify these code snippets to include the image URLS noted in 3.

.section-callout .img.rtimg a {
  float: right;
  background-image: url('the full URL to the first image');
  width: 261px;
  height: 63px;
  background-color: transparent;
  border: none;
  padding: 0;
  background-repeat:no-repeat;
  background-position:right bottom;
}
.section-callout .img.rtimg a:hover {
  background-image: url('the full URL to the second image');
  background-repeat:no-repeat;
  background-position:right bottom;
}

You can see this live on my test page at the very bottom, just above the Morefoot and Twitter section:

 

http://www.epicurus.com/members/home

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Martin -

 

That only have answers half my question.

 

So W3 Schools says to create this:

<style>
a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}
</style>

 

But how do you reference .png file to be the hover and not a color?

Share this post


Link to post
Share on other sites

Posted · Report post

In this case using the W3 Schools example something like this 

a:hover   {background-image:url('Your-image.jgg')}

Share this post


Link to post
Share on other sites

Posted · Report post

Ohhhhhhhhhhhhh, that seems easy :) I'll give it a try.

Share this post


Link to post
Share on other sites

Posted · Report post

ok - let us know how you get on :) 

Share this post


Link to post
Share on other sites