[Solved] CSS3 Button with Text Rotate (IE 11 Issue)

[vnvillar]

Hello Guys!

I need your help. I’m trying to work on a pure CSS3 button with text rotate. Tested the button on all modern browsers and made a few fixes for IE 8 – 10. It is working fine but when I checked it on IE11, it seems to be broken :(

I’ve already spent a lot of days trying to debug and fix the issue but I am giving up, I just can’t fix it. I need your expertise guys.

Here’s the link of the button I’m working on.

https://googledrive.com/host/0By6OIU_4MeTUSUQydUVfRS16M3c/index.html

Here’s the CodePen link:

http://codepen.io/anon/pen/yGLBD

Hope you can help me. :)

Best,

Val

[Paulie_D]

I know I’m going to get some grief. but why would you structure it that way?

Why not define the whole button (including text) and then rotate the whole thing?

It doesn’t seem to make much sense (to me) to define a vertical button and then horizontal text which has to be transformed.

As for the specific issue…honestly, I dunno. Perhaps there is a conflict with all those filters and IE specific ‘hacks’.

[vnvillar]

Hello Paulie_D,

I thought it would it be better having the markup this way but I think your point totally makes sense. I’ll try to redo the markup and maybe use an a tag and then rotate it? Do you have a better suggestion?

Thank you so much for your input! I really appreciate it. :)

Best, Val

[Ed]

I’m stabbing in the dark here, but in your CodePen you never provide a unprefixed transform rule for the button.

IE11 follows to the W3C specification for this property, so “can’t see” the -ms-transform rule (which is only used whilst browser implementation of the spec is unfinished). If you add transform: rotate(-90deg); just before .c2c_btn .c2c closes, it might work.

You should do that all the time anyway. For this exact reason.

[vnvillar]

Hi Ed!

Thanks for your input! I tried adding ‘transform: rotate(-90deg);’ on the CSS. But it didn’t seem to work. But maybe I’m doing the markup all wrong as Paulie_D pointed out. I’ll try to redo the whole thing and update you guys if I got it working.

Really appreciate your help. :)

[vnvillar]

Hey guys!

I’ve finally made a better one and is now working fine on cross-browsers especially in IE7++

Thank you so much for your inputs! I wouldn’t be able to fix this without your help. :)

Here’s the CodePen if you want to look at it.

http://codepen.io/anon/pen/lJKoG

[everyday1ebook]

You can try it. It supports from IE9+, Opera 11+ and Firefox 3.5+. Using the transform property.

Learning CSS – Rotation text in CSS (support on IE9+, Firefox, Opera11+)

[Author]

Posts