BryanMcAnulty

BryanMcAnulty supports this item

Supported

11 comments found.

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 8). 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 :P

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

hey bro! you should reconsider adding the proper css code when the property “disabled” exists on some element, actually it apply the same style.

Hey Edward,

Thanks for purchasing!!

That’s a good idea. We’ll consider implementing disabled styles for the buttons.

Thanks!

Bryan

this is a must be, disabled property is a common object state considering complex UI’s disable/enable actions dinamically without reload the page…. currently i managed to add “opacity:0.5” when disabled property exists, but considering your talent, maybe u can add something more creative… anyway, thanks, i really like these frreaking buttons :D

Yes, you’re right. Glad to hear you like them!

Hello guys i’m in need of help. i just bought the animation buttons but i have no clue as to how i get this working in wordpress. I thought it was plugin…it was not :/ sorry for being a noob

Yay Thank you Bryan it works!...sort of :/. i got the buttons in and they work great :), though the coulors are bugging me a little. My orange button works good, but has “on none hover” a blue text (same for the other two) however the other two (yellow and green) turn orange when i hover? Something you can fix :/? here’s a link to my site: http://www.pmhwebdesign.com/wp/

Hi Urbahz,

Glad to hear that! :)

Emailed you another response for the fix.

Thanks,

Bryan

Thank you so very much! it worked like a charm

hmmm… i dont understand where is problem, but now when i hover buttons – page like reloads, white screen for a second

Hi igorsaz87,

Thanks for purchasing!

I’m not sure if you sent an email about this that we already responded to, so I want to make sure to respond here as well.

If your page is reloading when you hover over the buttons, the issue is caused by something other than our button pack.

Or, if you mean to say that the screen flashes white when you hover over a button, it could be that the computer you are testing on has an issue with its graphics driver (just an idea).

Hope this helps!

Thanks,

Bryan

look good. GLWS!

by
by
by
by
by
by