2,711,050
Total Marketplace Items3,525,151
COPYRIGHT © 2013 ENVATO| TERMS OF USAGE| SUPPORT/HELP| ICONS BY TANGO + WEFUNCTION + FAMFAMFAM
Adobe®, Flash®, Flex®, Fireworks®, Photoshop®, Illustrator®, InDesign® and After Effects® are registered trademarks of Adobe Systems Incorporated.
Request processing...
The animation looks very nice. I had a question tho. It says that it is compatible with IE7 , IE8 but then below you note that the animation will just show up as a block in lower versions of ie (like ie7 and
. So the animation isn’t really compatible with these browsers?
Hey jgoch101,
You are right the animation is not supported in lower versions of IE.
Compatible with IE7 and IE8 means that the button still functions and does not break the layout. Some CSS3 buttons you will find in tutorials are proof of concept and have not been tested in IE at all. This button set will provide enough compatibility to function normally for IE users, but unfortunately older versions of IE don’t support CSS3 . IE is losing marketshare rapidly though: http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_StatCounter).svg
I’m following the idea of progressive enhancement. Users of modern browsers should be able to have better interactions if their browser supports it.
Hope this helps.
Bryan
Bryan,
Great buttons. On the icon-slide-btn, we are trying to figure out how to flip the text and the image. So we were hoping to have the arrow be to the right of the text. After looking at the css, we are having trouble understanding what elements and properties in the css controls that.
Any pointers would be greatly appreciated!
Hey dabomb,
Flipping the icon to the other side is easy.
You’ll need to adjust the padding for the hover state so that space is made on the right side instead of the left:
.icon-slide-btn:hover{ padding:10px 55px 9px 20px; }You’ll also want to adjust the position of the image so that it is on the right of the text:
.icon-slide-btn img { position:absolute; top:0px; right:0px;Last, adjust the border radius so the opposite sides are rounded.
Thanks for purchasing. Glad you like the buttons!
Bryan
in the words of Borat. Nice, Very Nice
thanks for your time to share as i know you spent hours on just one gradient
Thank you mrChristo!
no probs, now im spending hours getting a f6f6f6 to cccccc gradient to look good for site with a light ui im working on. honestly you saved me hours, i can now see the code and tweak thanks again
Great work! This is very well done.
Is it possible to use the buttons with a Wordpress menu? In particular, the icon-slide-btn class?
It’s easy enough to setup with an HTML page, but I am confused how to add the img src=”images/check.png code to a Wordpress menu item. I can add the image as a background element to a custom menu, but that doesn’t seem to work.
Any thoughts?
Thanks for the help.
Hey lucid9753,
Thanks for purchasing!
Yes, it would be possible to use them in a menu if you want, but it will require a little bit more work.
Here’s an article that talks about adding images to a custom wordpress menu. Let me know if it helps: http://mike-thomson.com/blog/?p=290
Bryan
Hi Bryan,
Thanks for replying. I located that article as well and got fairly close to having it working, but decided to forgo the image. I was able to get the animation and all other effects functioning well though.
Best,
Tony
Hi Tony,
Good to hear. If you do want any further assistance in using icons as well, I am happy to help. Let me know.
Bryan
Did you test these in IE9? I purchased, downloaded, and loaded up the index.html. Looked great in firefox. Loaded it up in IE9. Looked good, but then started hovering over the buttons. Some bizarre stuff happens, images disappear, etc. Has anyone else had this issue?
Hi phpmysqlguy,
You are right there is a small issue on the split-btn hover effect for IE9.
The fix is very simple. Just delete line 320 from the css file.
The other buttons function correctly. The reason this happened is because there is a line of css in their to support older versions of IE that IE9 doesn’t like.
That’s it!
Thanks,
Bryan
Sorry to be a pain, but when ever I place the buttons, the text goes on top of each other and doesn’t stretch out. I know it must be a css issue, but can’t seem to find where this is going on. I have a magento site.
Kind Regards Phillip
Hi Phish82,
Thanks for purchasing!
This is difficult to diagnose without seeing your site. It does sound like a CSS issue. It sounds like you simply need to increase the width of the button.
Bryan