Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to insert buttons that change color when hovering?
- This topic has 8 replies, 2 voices, and was last updated 10 years, 5 months ago by Fabio.
-
AuthorPosts
-
October 20, 2013 at 12:49 am #67764FabioParticipant
Hi there,
I have two button files: button1.png and button2.png
I've uploaded them in my /images/ folder in the eleven40 theme.And am now trying to use this:
http://www.studiopress.com/design/colored-content-boxes-buttons.htm
but substituting the colors with my two buttons, so that every time I need that button I can use the:
Blue Button Link
code.Problem is the "blue button link" text.
When I delete it I can't link anymore. Or if I manage to link, the link disappears when shifting from text to visual mode.I'm simply looking for an easy way to insert .png buttons in my website that change color when hovering.
Is there any easy way to do this?Thank you!
FabioOctober 20, 2013 at 6:17 am #67792Brad DaltonParticipantYou can:
1. Install a plugin for buttons
2. Add CSS and HTML code to your child theme to create new buttons
3. Simply use the existing code included in Genesis and your child theme to add buttons:https://gist.github.com/braddalton/b235dad710b4800f66cc
October 20, 2013 at 6:35 pm #67917FabioParticipantHi Brad, thanks.
To be honest I haven't quite understood your reply...It seems it would be useless to use a plugin if I can use the existing code included in Genesis and my child theme.
But if I insert:
Click This Button!
in my text editor, all I get is a "Click this button" link.I guess I'm missing something, but how do I get the actual button.png to appear instead of the text "click this button"?
I already have the images of the buttons and have added them to my /image/ folder via FTP.Could you please be a little more specific?
Thank you!October 20, 2013 at 10:24 pm #67935Brad DaltonParticipantTry modifying the CSS code for the buttons to something like this:
.button-gray { background-image: url(images/button1.png); border: 1px solid #bdbdbd; }
If you have any more questions about buttons or need some different code examples, i have written a tutorial about it http://wpsites.net/web-design/free-css3-buttons-includes-14-colors-4-sizes/
October 21, 2013 at 4:47 am #67981FabioParticipantHi Brad,
thanks but that's exactly what I did before...The problem is inserting the button inside the post, because if I leave the words "Blue Button Link", the words "Blue Button Link" will appear on top of button.png with button.png working as a background for the words "Blue Button Link"
<a class="button-blue" href="#">Blue Button Link</a>
but if I do this:
<a class="button-blue" href="#"></a>
without the words "Blue Button Link" the all
<a class="button-blue" href="#"></a>
disappears when I swap from text mode to visual mode inside my post.
So, basically the problem is: how do I insert those button.png inside my posts making them change color when hovering?
Thank you for your help!
October 21, 2013 at 5:52 am #67986Brad DaltonParticipantReplace the hover code with this:
.button-gray:hover { background-image: url(images/bg.png); text-decoration: none; color: #fff!important; }
October 21, 2013 at 6:19 am #67992FabioParticipantHey Brad,
I had already done that and it does work.
The problem are the words on top of the button:If I remove those words I am not able to add a link.
This is how I do to add a link:
1) I switch to my text editor
2) I type:
<a href="http://example.com">Click This Button!</a>
3) Since I do not want "Click This Button" to appear on top of the button like in
http://imgur.com/8YXnSwQ
4) I delete the words "Click This Button"
5) I cannot link anymore!So the problem is all in these "Click This Button" (or whatever) text that seems to be necessary for the whole thing to work.
I don't want the words "Click This Button" on top of my buttons...
October 21, 2013 at 6:32 am #67998Brad DaltonParticipantOctober 21, 2013 at 5:45 pm #68113FabioParticipantHi Brad, thanks for your help.
So basically there's no way in wordpress I can create two custom .png buttons (button1.png) and (button2.png) and insert them in a post in a way that
1) the button is clickable
2) when hovering on button1 I get button2?
Thanks!
F. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.