Rotating the button using CSS3 and applying it on

Question

Im trying to rotate a button (with) CSS3 styles (gradient) by 90degress and apply it on absolute right:0px position. That button is "About us".

It seems like there are 2 problems. First is that the button element doesn't go all the way to the right (like I want it) and it seems that the problem is in CSS3 rotation that still thinks 150px width. If I disable the rotation, the element is aligned to the right screen perfectly, with no space left out.

Also I found that in Google Chrome, when i hover over the button "Kaj točno delam", it doesn't apply gradient correctly - meaning there is 1px (or 2) of black space on the button before the gradients starts (from left to right) - this however doesn't happen, when being in normal (horizontal) mode, or is being turned to the right (when i tested). It's also strange because that doesn't show as big when using Chrome Developer tools to toogle element :hover.

Using Internet Explorer the vertical button "About us" only works when pressing it on top (and nowhere else).

Do all of this problems happen because of CSS3/HTML bug?

Is there any better solution to do this without using images? - perhaps using jQuery or something else?

Thank you for your help.

Answer 1

If you rotate an element, the width stays the same. You need to calculate your right-position like this:

-(width/2-height/2) = -(150/2-27/2) = -61,5

So you need to take right: -61,5px; in stead of right: 0;