Jump to content


Photo
- - - - -

Create CSS for a custom pressed/hover Callout button

Callout button

  • Please log in to reply
7 replies to this topic

#1 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 17 May 2013 - 03:44 PM

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:

Please Login or Register to see this Hidden Content

 

Thanks!



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 17 May 2013 - 03:47 PM

Hello bauerhaus 

 

This topic on W3 Schools should help

Please Login or Register to see this Hidden Content



#3 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 17 May 2013 - 03:55 PM

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?



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 17 May 2013 - 03:59 PM

In this case using the W3 Schools example something like this 

Please Login or Register to see this Hidden Content



#5 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 17 May 2013 - 04:04 PM

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



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 17 May 2013 - 04:45 PM

ok - let us know how you get on :) 



#7 bauerhaus

bauerhaus

    Advanced Member

  • Members
  • 44 posts

Posted 18 May 2013 - 06:24 PM

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('

Please Login or Register to see this Hidden Content

');
}

 

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?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 May 2013 - 09:52 PM

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.

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: Callout, button