CSS - Sticky & Flexible Fixed Right Button

I have a very big problem to make an sticky fixed button on the right of the page, this button will be a dynamic text with different languages.

So, there is my code and try to use many words to test and the button must stick on the right :

<a href="#" class="button">Contact us</a>

a.button {
    background: #43515a url("http://www.aristaofrotorua.co.nz/rotorua-accommodation/images/email.jpg") no-repeat 88% center;
        font-family: "Myriad Pro";
        font-size: 17px;
        color: white;
        text-transform: uppercase;
        padding: 0 10px;
        outline: none;
        text-decoration: none;
        position: absolute; 
        top: 109px;
        right: 0;
        /*width: 136px;*/
        height: 40px;
        line-height: 45px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);

}

Myfiddle

Solution

You can solve your issue if you change the default transform-origin property which is 50% 50% to 100% 100%.

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation.

see here for more info

That means that by default your element rotates around it's center (50% form left and 50% from top). So when you change the content, the element's width changes too, moving the origin of the rotate property. So you need to set the transform origin to the right bottom (100% 100%) which isn't moving according to the content in your case. so the transform origin doesn't move either.

CSS to add :

-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
transform-origin:100% 100%;

DEMO

body {
  background: #ededed;
}
a.button {
  background: #43515a url("http://www.aristaofrotorua.co.nz/rotorua-accommodation/images/email.jpg") no-repeat 88% center;
  font-family: "Myriad Pro";
  font-size: 17px;
  color: white;
  text-transform: uppercase;
  padding: 0 10px;
  outline: none;
  text-decoration: none;
  position: absolute;
  top: 109px;
  right: 0;
  /*width: 136px;*/
  height: 40px;
  line-height: 45px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<a href="#" class="button">Conta sdsdsd s ct us lkjcvgf</a>