Jump to content
Sign in to follow this  
bauerhaus

Create CSS for a custom pressed/hover Callout button

Recommended Posts

bauerhaus    0
bauerhaus

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
greenfly    230
greenfly

Hello bauerhaus 

 

This topic on W3 Schools should help http://www.w3schools.com/cssref/sel_hover.asp


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

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
greenfly    230
greenfly

In this case using the W3 Schools example something like this 

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

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

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

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

ok - let us know how you get on :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
bauerhaus    0
bauerhaus

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
      Button: FAÇA SUA INSCRIÇÃO.
      Tks
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      i like to know if i can use signup button shortcode inside text editor or embed section.
      Tks.
    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • hibbsy78
      By hibbsy78+
      Callout could do with some mobile love - anyone else think that the button should default underneath on mobile?
      https://www.hibbslupustrust.org/
       

    • norbert
      By norbert
      With the great options to make price tables, i would skip the button under every option. But .... how can I do this?
×